ホームページ > 記事 > ウェブフロントエンド > 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 サイトの他の関連記事を参照してください。