jquery - jQuery：first-childが期待どおりに機能しない

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>

そして、私はこれを使用して、「サービス」クラスを持つs<label>の最初のレベルのsのみを選択しようとしています：<li>

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

しかし、は再帰的であるように見え、ネストされたsの最初の子を選択してい<ul>ます。

私はここで何が間違っているのですか？「サービス」クラスを持つの<label>最初のレベルでのみを選択するにはどうすればよいですか？<li>

Answer 1

すべての子ではなく、親からの子が必要であることを明示する必要があります

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

実際の例

Answer 2

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

固定デモ

---

>直接の子セレクタです。

したがって、a > bセレクターは、b直接の親が である場合にのみ選択することを意味しますa。

w3仕様:

8.2. 子コンビネータ

子コンビネータは、2 つの要素間の幼年期の関係を表します。子コンビネータは「大なり記号」(U+003E、>) 文字で構成され、単純なセレクターの 2 つのシーケンスを分離します。

---

:first-childセレクターは、親の最初の子である要素を選択することを意味します。

w3spec:

6.6.5.6. :first-child 疑似クラス

:nth-child(1) と同じ。:first-child 擬似クラスは、他の要素の最初の子である要素を表します。

Answer 3