Tag: css selectors

如何将querySelectorAll仅用于具有特定属性集的元素?

我试图使用document.querySelectorAll所有具有value属性设置的checkbox。 页面上还有其他checkbox没有设置值,每个checkbox的值都不相同。 ID和名称不是唯一的。 例如: <input type="checkbox" id="c2" name="c2" value="DE039230952"/> 如何只select那些设置了值的checkbox?

querySelectorsearch直接的孩子

我有一些jQuery般的function: function(elem) { return $('> someselector', elem); }; 问题是我怎么可以做同样的querySelector() ? 问题是> querySelector()select器要求父显式指定。 有没有解决办法?

input CSSselect器不适用于默认types的文本input?

默认inputtypes是“文本”。 我一直认为,即使未在控件上明确声明types,针对input[type='text'] CSS声明也会影响这些input。 但是,我只是注意到,我的默认types的文本input不会得到样式。 这是为什么? 我该如何解决这个问题? CSS input[type='text'] { background:red; } HTML <input name='t1' type='text'/> /* Is Red */ <input name='t1'/> /* Is Not Red */ http://jsfiddle.net/LhnNM/

CSS – select一个id中的类的语法

什么是select器语法来通过类名在一个id中select一个标签? 例如,为了使内部的“李”变成红色,我需要select什么? <html> <head> <style type="text/css"> #navigation li { color: green; } #navigation li .navigationLevel2 { color: red; } </style> </head> <body> <ul id="navigation"> <li>Level 1 item <ul class="navigationLevel2"> <li>Level 2 item</li> </ul> </li> </ul> </body> </html>

将样式应用于第一行的单元格

这应该是非常简单的,但我无法弄清楚。 我有这样一张桌子: <table class="category_table"> <tr><td> blabla 1</td><td> blabla 2 </td></tr> <tr><td> blabla 3 </td><td> blabla 4 </td></tr> </table> 我想让第一个tr行的td标签有vertical-align 。 但不是第二排。 .category_table td{ vertical-align:top; }

css3限于类的types

有什么办法来限制css3的nth-of-type到一个类? 我有不同类别的dynamic数量的section元素指定他们的布局需求。 我想要抓住每一个第三个.module ,但是看起来nth-of-type查找类的元素types,然后计算types。 相反,我想只限于.module s。 谢谢! JSFiddle来演示: http : //jsfiddle.net/danielredwood/e2BAq/1/ HTML: <section class="featured video"> <h1>VIDEO</h1> </section> <section class="featured module"> <h1>NOT A VIDEO</h1> </section> <section class="featured module"> <h1>NOT A VIDEO</h1> </section> <section class="featured module"> <h1>NOT A VIDEO (3)</h1> </section> <section class="featured module"> <h1>NOT A VIDEO</h1> </section> <section class="featured module"> <h1>NOT A VIDEO</h1> </section> <section class="featured […]

如何select元素的父代和父代的兄弟

我有这个代码: $("#test").siblings('p').remove(); $("#test").remove(); 我如何链接这个代码,而不是单独写它?

:不(:空)CSSselect器不工作?

我有一个这个特定的CSSselect器的时间,不想工作,当我添加:not(:empty) 。 它似乎适用于其他select器的任何组合: input:not(:empty):not(:focus):invalid { border-color: #A22; box-shadow: none } 如果我删除:not(:empty)部分,它工作得很好。 即使我将select器更改为input:not(:empty)它仍然不会selectinput文本的input字段。 这是打破了,还是我只是不允许使用:empty在一个:not()select器中为:empty ? 我唯一能想到的另一件事是,浏览器仍然说这个元素是空的,因为它没有孩子,只是说一个“价值”。 那么:emptyselect器是否对input元素和常规元素没有单独的function? 这看起来似乎不太可能,因为使用:empty在一个字段上填空并在其中input内容将导致替代效果消失(因为它不再是空的)。 testingFirefox 8和Chrome。

用于非空属性的CSS属性select器

有没有适用于非空属性的CSSselect器? 如果属性不存在 ,则使用:not([Data-Attribute=''])匹配。 我正在寻找类似[Data-Attribute!=''] 。

用于select在另一个元素之前出现的元素的CSSselect器?

我正在为我的网站devise一个login页面,当文本框获得焦点时,我想大胆地在input框前面加上标签。 现在我有以下的标记: <label for="username">Username:</label> <input type="textbox" id="username" /> <label for="password">Password:</label> <input type="textbox" id="password" /> 我可以使用相邻的select器在文本框之后select标签,但是我无法select它之前的元素。 我可以使用这个CSSselect器规则,但是它只能在后面select标签,所以当用户名文本框获得焦点时,密码标签变为粗体。 input:focus + label {font-weight: bold} 有什么我可以做的这个工作? 我知道JavaScript可以用来轻松地做到这一点,但如果可能的话,我想使用一个纯粹的基于CSS的解决scheme,我只是想不出一个办法来做到这一点。