CSS3 セレクター学習ノート_html/css_WEB-ITnose

まず、first-child と last-child について説明します。これら 2 つのセレクターは、親要素の下にある最初の子要素と最後の子要素です。 nth-child および nth-last-child は、親要素の下にある指定されたシリアル番号を持つ子要素、または偶数番号と奇数番号の子要素です。

/*セレクタ記述例*/

nth-child(n) //正のn番目の子要素
nth-last-child(n) //下からN番目の子要素
nth-child(odd) / /カウント中偶数番号の子要素をすべてダウンします
nth-last-child(even) //奇数番号の子要素をカウントダウンします

それでは、nth-of-type と nth-last-of-type はどうなるでしょうか?

1 つの div に複数の記事があります。h2 と p を複数回使用する場合、h2 に奇数色と偶数色を実装する必要があります。nth-child または nth-last-child を使用して実装すると、いくつかの問題が発生します。 (デモコードは提供されていません)、読者は自分で h2ph2ph2p を書くことができます (このように) 実験の結果、奇数と偶数の色はなく、奇数の色のみが変わります。

この問題が発生する理由は、n 番目の子セレクターが子要素が奇数要素であるか偶数要素であるかを計算する際に、親要素内のすべての子要素と一緒に計算されるためです。つまり、「h2:nth-child(odd)」という文の意味は、「div要素内の奇数番目のh2子要素に使用する」という意味ではなく、「div要素内の奇数番目の子要素に使用する」という意味です。 div 要素が使用されます。要素が h2 のサブ要素である場合に使用します。 (デモでは、h2 と p が互いにインターリーブされ、h2 は奇数の位置にあります。)

nth-of-type および nth -last-of-type を使用すると、この種の問題を回避できます。これら 2 つのセレクターを使用すると、CSS3 は子要素が奇数の子要素か偶数の子要素かを計算するときに、同じ型の子要素のみを計算します。

/*セレクター記述例*/

h2:nth-of-type(odd) //偶数番号のh2サブ要素
h2:nth-of-type(even) //奇数番号のh2サブ要素-element

新しい構造擬似クラスセレクターリスト:

E:root: E が配置されているドキュメントのルート要素と一致します

E:nth-child(n): 要素タイプ E と一致し、n 番目の子です親要素の要素

E:nth-last-child(n): 要素タイプ E と一致し、親要素の最後から n 番目の子要素です (前の項目とは逆の順序)

E:nth-of -type(n): 親要素と一致します。 型 E の n 番目の子要素と一致します。

E:nth-last-of-type(n): 親要素の最後の n 番目から、型 E の n 番目の子要素と一致します (逆順)前の項目の順序)

E :first-of-type: 親要素の型 E の最初の子要素と一致します

E:last-child: E の要素の型と一致し、その要素の最後の子要素です親要素

E:last-of-type: 親要素

E のタイプ E の最後の子要素と一致します

E:only-child: 要素タイプ E と一致し、親要素

E 内の唯一の子要素です:only-of-type: 親要素と一致します 唯一の子要素は E

E:empty: 子ノード (テキストを含む) を含まない E 要素と一致します