css3 の構造的な疑似クラス セレクターの賢明な使用法

最近、海外の Web サイトで構造的な疑似クラス セレクターの使用法を見て、非常に実用的だと思ったので、自分で試して記録しました。

これは最も基本的なスタイルです:

リーリー

本文の内容:

リーリー

1 つ目は、最も基本的な構造擬似クラス セレクターの使用法です。

リーリー

結果は次のように表示されます:

Use:nth-child(n+6) は、:nth-child(6) 以降の li タグ要素と同等です:

リーリー

結果は次のように表示されます:

同様に、:nth-child(6) と次の li タグ要素と同等の:nth-child(-n+6) を使用します。

リーリー

結果は次のように表示されます:

上記の原則に基づいて、いくつかの高度な原則を考え出すことができます:

たとえば、nth-child(n+4):nth-child(-n+8) を使用して、:nth-child(4) 以上および :nth-child(8) の li タグ要素を取得できます。以下:

リーリー

結果は次のように表示されます:

:nth-child(n+2):nth-child(odd):nth-child(-n+8) を使用して、nth-child(n+2) to:nth-child(-n を取得することもできます) +8 ) 単数形 li タグ要素間:

リーリー

結果は次のように表示されます:

最後に、:nth-child(3n+1) を使用して、番号 1、4、7、および 10 の li タグ要素を取得することもできます。

リーリー

結果は次のように表示されます: