ホームページ > 記事 > ウェブフロントエンド > css3 の構造的な疑似クラス セレクターの賢明な使用法
最近、海外の Web サイトで構造的な疑似クラス セレクターの使用法を見て、非常に実用的だと思ったので、自分で試して記録しました。
これは最も基本的なスタイルです:リーリー
リーリー
リーリー
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 タグ要素を取得することもできます。
リーリー