Question

我的表格看起来像这样：

<ul id="services">
<li class="service"><label><input type="checkbox">A single option</label>
</li>
<li class="service"><label><input type="checkbox">Another single option</label>
<ul>
    <li>
    <select>
    </select>
     additional options</li>
</ul>
</li>
<li class="service"><label>
<select>
</select>
A multiple option</label>
<ul>
    <li><label><input type="checkbox"> with another option </label>
    <select>
    </select>
    </li>
</ul>
</li>
<li class="service"><label>
<select>
</select>
Another multiple option</label>
<ul>
    <li><label><input type="checkbox"> with another option </label>
    <select>
    </select>
    </li>
    <li>
    <select>
    </select>
     additional options</li>
</ul>
</li>

我试图通过使用“service”类仅选择第一级<label>中的<li> s：

$(".service label:first-child").css("background", "yellow");

但似乎是递归的，并且正在选择嵌套<ul>的第一个子项。

我在这里做错了什么？如何仅使用“服务”类选择<label>的第一级中的<li>？

Answer 1

$(".service > label").css("background", "yellow");

Fixed DEMO

>是直接子选择器。

所以a > b选择器的意思是，只有在直接父级为b的情况下才选择a。

w3 spec:

<强> 8.2。儿童组合器

儿童组合者描述了两个元素之间的童年关系。子组合子由“大于号”（U + 003E，＆gt;）字符组成，并分隔两个简单选择器序列。

:first-child选择器意味着，选择它的父元素的第一个子元素。

w3spec:

<强> 6.6.5.6。：第一胎伪类

与：nth-child（1）相同。：first-child伪类表示一个元素，它是某个其他元素的第一个子元素。

Answer 2

你需要明确表示你想要孩子，而不是所有孩子

 $(".service > label").css("background", "yellow");

Live Example

Answer 3

$("#services>li>label").css("background", "yellow");

要仅使用>的直接孩子。

您可以在此处获取有关选择器的更多信息：http://www.w3schools.com/cssref/css_selectors.asp

你认为你的jsfiddle存在一些问题，但如果你只想要第一级别的li，那就是你需要做的全部。

jQuery：第一个孩子没有按预期工作

3 个答案: