css :first-child の役割は何ですか?

CSS では、:first-child セレクターの機能は次のとおりです: 親要素内の最初の子要素と一致させるには、構文は「E:first-child{css code}」です。このセレクターは次のことを行う必要があります。 be これは、「最初の子要素」と「この子要素がたまたま E である」という 2 つの条件が満たされた場合にのみ機能します。

css では、:first-child セレクターは、親要素の最初の要素が親要素の最初の要素と一致しない場合、その親要素内の最初の子要素と一致します。要素を探していますが、機能しません。 (推奨チュートリアル: CSS ビデオ チュートリアル )

このセレクターは誤解されやすく、通常 2 つの誤解があります:

• 誤解 1 : それはです。 E:first-child は E 要素の最初の子要素を選択するとみなします。

• 誤解 2: E:first-child は、E 要素の親要素の最初の E 要素を選択すると思われます。

上記 2 つの理解は間違っています。上記 2 つの理解が間違っていることを証明するために、次の例を見てください。

<!-- 误解一 -->
<style>
div:first-child{color: red;}
</style>

<div class="demo">
<a>一个链接</a>
<a>一个链接</a>
<a>一个链接</a>
<a>一个链接</a>
</div>

結果は次のとおりです。 :

最初の理解によれば、最初の a 要素のフォントの色だけが赤になるはずですが、実際にはすべての要素が赤になります。

<!-- 误解二 -->
<style>
div a:first-child{color: red;}
</style>

<div class="demo">
<p>一个段落</p>
<a>一个链接</a>
<a>一个链接</a>
<a>一个链接</a>
<a>一个链接</a>
</div>

結果は次のようになります:

2 番目の理解によれば、div 内の最初の a 要素のフォントは赤になるはずです。この理解も間違っていることが証明されました。

OK、正しく理解してください: E 要素がその親の最初の子要素である限り、 が選択されます。 「最初の子要素」と「この子要素がたまたま E である」という 2 つの条件を同時に満たす必要があります。

以下の正しい例を見てください:

<style>
span:first-child{color: red;}
/*p元素的父元素的第一个子元素是div而不是p元素，因此该样式不起作用*/
p:first-child{color: blue;} 
i:first-child{color: orange;}
</style>

<div class="demo">
<div>.demo的第一个子元素是div</div>
<!--第一个span元素是它的父级P元素的第一个span，颜色变红色-->
<p><span>第一个span</span>第一个段落P<span>第二个span</span></p>
<!--第一个i元素是它的父级a元素的第一个i，颜色变橙色-->
<p>一个链接<i>第一个i元素</i></p>
<!--第二个i元素是它的父级a元素的第一个i，颜色变橙色-->
<p>一个链接<i>第二个i元素</i></p>
<p>一个链接</p>
</div>

効果:

プログラミング関連の知識の詳細については、次のサイトを参照してください: プログラミングを始めよう! ！

以上がcss :first-child の役割は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。