jQuery的：第一，孩子無法正常運行

Question

我有一個表格看起來像這樣：

jsFiddle

<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> 

我試圖在第一隻選擇<label>小號與「服務」類的<li>小號水平通過使用這樣的：

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

，但似乎是遞歸的，選擇嵌套的<ul>的第一個孩子。

我在這裏做錯了什麼？如何才能在<li>的第一級中選擇<label> s的「服務」類？

Answer 1

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

Fixed DEMO

---

>是直接子選擇器。

so a > b選擇器的意思是，只有在直接父母爲a的情況下，才選擇b。

w3 spec:

8.2。兒童組合器

兒童組合子描述了兩個元素之間的童年關係。子組合器由「大於號」（U + 003E，>）字符組成，並將兩個簡單選擇器序列分開。

---

:first-child選擇器裝置，選擇其是第一子的它的父元素。

w3spec:

6.6.5.6。 ：第一個孩子僞類

相同：nth-​​child（1）。第一個孩子僞類表示一個元素，它是某個其他元素的第一個孩子。

Answer 2

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

爲了只得到直接孩子使用>。

你可以在這裏選擇更多的信息：http://www.w3schools.com/cssref/css_selectors.asp

你的jsfiddle有一些問題，我想，但如果你只希望李的第一級這就是你需要做的。

Answer 3

你必須明確你想要的孩子，從父，而不是所有孩子的

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

Live Example