css - 最後の子/最初の子は正確にどのように機能しますか?

Question

要素とクラスで最初の子と最後の子がどのように機能するかについて質問がありますか?

私の例を見てください

そして、それについて私はいくつか質問があります：

1. このルールが機能しない理由:

   p.test1:first-child{
       color: green;
   }
   

2. class で最初の要素の色を変更するにはどうすればよいtest1ですか?

3. 例 1 に似ている場合に、このルールが機能する理由:

   p.test1:last-child{
       color: white;
   }
   

Answer 1

:first-child CSS 疑似クラスは、親要素の最初の子要素である要素を表します。

:last-child CSS 疑似クラスは、親の最後の子要素である要素を表します。

参考文献:

http://developer.mozilla.org/en-US/docs/CSS/:first-child
http://developer.mozilla.org/en-US/docs/CSS/:last-child

1-あなたの例p.test1では、親の最初の子要素ではないため、セレクターは要素を選択しません。

2- .test1:nth-of-type(4)更新、 1 の代わりに 4 を置き換え、静かなソリューションではありません。参照: http://www.w3.org/TR/css3-selectors/#nth-of-type -擬似

3- 親の最後の子要素であるため。

注: この例の親はbodyタグです。

今後の参考のために問題の例:

<p>test</p>
<p>test</p>
<p>test</p>
<p class="test1">test</p>
<p class="test1">test</p>
<p class="test1">test</p>
<p class="test1">test</p>

Answer 2

最初の子/最後の子は、親要素に関連しています。あなたの例では、親要素の最初の子である p.test-element はありません(JsFiddleコンテナ)。代わりに、最初の子は単純な p 要素です。最初の p 要素に .test-class を設定すると、緑色に変わります。