html - 最初の人だけにCSSスタイルを適用するネストされたリストのルート

Question

CSSを最初のliだけに適用したいが:first-child、すべてのulのすべての最初の子に適用したい

これが私のコードです

#menu-navigation li:first-child{
   color:red;
}​

このHTMLに適用すると：

<ul class="nav" id="menu-navigation">
    <li>Home</li>
    <li>About Us
        <ul>
            <li>Our Team</li>
        </ul>
    </li>
</ul>​

...「ホーム」と「私たちのチーム」の両方が赤に変わります。

Answer 1

子セレクターを使用します。

#menu-navigation>li:first-child{
   color:red;
}​

例： http： //jsfiddle.net/w47LD/3/

Answer 2

ID /クラスを使用する方が簡単ではないでしょうか？

<li class="red"> Our Team </li>

.red
{
  color: red;
}



Alternatively you could use an ID...



<li id="red"> Our Team </li>

#red
{
  color: red;
}