ホームページ  >  記事  >  ウェブフロントエンド  >  css3 の構造的な疑似クラス セレクターの賢明な使用法

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

WBOY
WBOYオリジナル
2016-09-28 08:38:261616ブラウズ

最近、海外の 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 タグ要素を取得することもできます。

リーリー

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。