1 
   <ul>
        <li class="bla">aaa</li>
        <li class="my_li">sss</li>
        <li class="my_li">ddd</li>
        <li class="my_li">fff</li>
    </ul>

css：

    .my_li:first-child{
            color: #090;
    }

これは機能しません。最初のliタグクラスを「bla」ではなく「my_li」にすると、常にli要素が緑色に設定されます。誰かが教えてください、なぜこれが起こったのですか。

4

6 に答える 6

6

クラス「my_li」のメンバーである最初の要素は、その親の2番目の子です。

:first-child親の最初の子である要素を選択します。

于 2012-09-07T14:15:14.647 に答える
2

このセレクターを使用する必要があります。

.my_li:nth-child(2) { ... }

（私が現在あなたの質問を理解していて、2番目の<li>にこのスタイルを持たせたい場合）

于 2012-09-07T14:26:34.217 に答える
1

そのセレクターは、親の最初の子であるクラスmy_liを持つ要素を選択していることを意味するため、機能しません。これは、htmlには存在しません。

試す

<ul>
    <li class="my_li">aaa</li>
    <li class="my_li">sss</li>
    <li class="my_li">ddd</li>
    <li class="my_li">fff</li>
</ul>

次に、ルールがaaaに適用されます。

http://www.w3schools.com/cssref/sel_firstchild.asp

于 2012-09-07T14:22:39.680 に答える
1

最初の要素のクラスを変更したくない場合は、次を使用します。

ul li:first-child{
            color: #090;
    }
于 2012-09-07T14:26:43.823 に答える
1

クエンティンが言ったよう:first-childに、その親の最初の要素を指します。

サンプルリストの最初の要素をターゲットにする場合は、次のようにします。

ul li:first-child {
   color: #090;
}
于 2012-09-07T14:27:15.150 に答える
1

li最善の解決策は、要素に2番目のクラスを追加することだと思います

CSS：

.first_li{ color:#090; }

<ul>
  <li class="bla">aaa</li>
  <li class="my_li first_li">sss</li>
  <li class="my_li">ddd</li>
  <li class="my_li">fff</li>
</ul>

セレクターで問題を解決することはできますが、それは、親（この場合は2番目の子）内:nth-child(n)の要素がどの順序であるかを正確に知る必要があることを意味し、さらに要素を挿入すると失敗します。liul

css: .my_li:nth-child(2){ color: #090;}
于 2012-09-07T14:49:45.187 に答える