CSS3 にはどのような擬似クラス セレクターがあるのか​​、また擬似クラス セレクター nth-child() の使用方法は何ですか

CSS3 の新しい属性は、疑似クラス セレクター nth-child() など、多くの利便性をもたらしますが、IE6 ～ 8 および FF3.0 ブラウザー、CSS3 の nth-of-type ではサポートされていません ( n) (nth-of-type(1) など) この特別なクラス セレクターは、より個人化されたタイトルや段落などを設定できます。ただし、現在 nth-of-type(n) は、Firefox 3、Opera、Safari、および一部のブラウザーのみをサポートしています。クロムなど。

:nth-child() は、要素の 1 つ以上の特定の子要素を選択します。次の方法で選択できます:

:nth-child(length);/*パラメータは、特定の数値の長さです。 integer */

:nth-child(n);/*パラメータはn、nは0から始まります*/

:nth-child(n*length)/*nの倍数を選択してください、nは0から始まります * /

:nth-child(n+length);/*length より大きい長さの後の要素を選択します*/

:nth-child(-n+length)/*length より小さい長さの前の要素を選択しますlength*/

:nth -child(n*length+1);/*数値を 1 つおきに選択することを示します*/

例:

li:nth-child(3){background:orange;}/*Set 3 番目の li の背景をオレンジ色に設定します*/

li:nth-child(3n){background:orange;}/*3 番目、6 番目、9 番目、...、li のすべての倍数の背景をオレンジ色に設定します* /

li: nth-child(n+3){background:orange;}/*3 番目の要素の後ろから li の背景を選択し、オレンジに設定します*/

li:nth-child(-n+3) {background:orange;} /*3 番目の要素の前の li を選択して背景をオレンジに設定*/

li:nth-child(3n+1){background:orange;}/*このメソッドは次のことを実現しますいくつかの要素から 1 つを選択する効果* /

:fist-child は要素の最初の子要素を選択します

例:

li:first-child {background: green;}/*要素の背景を設定します最初の li を緑にします*/

:last-child 要素の最後の子要素を選択します

例:

li:last-child {background: green;}/*最後の li の背景を緑に設定します*/

:nth-last-child() は、この要素の最後の子要素から開始して、要素の 1 つ以上の特定の子要素を選択します

:nth-last-child() セレクターと前の :nth -child() は非常に似ていますが、ここに追加の last があるため、その機能は前の「:nth-child」とは異なります。特定の要素を選択するために最後の要素からカウントするだけで済みます。

例:

li:nth-last-child(4) {background: red;}/*最後から4番目のliの背景を赤に設定*/

:nth-of-type() 選択して指定要素

:nth-of-type は:nth-child と似ていますが、違いは、セレクターで指定された要素のみを計算することです。実際、このセレクターは主に特定の要素に使用されます。これは、さまざまなタイプの要素を含む要素を見つけるのに役立ちます。たとえば、div.demo には p 要素、li 要素、img 要素などが多数ありますが、必要なのは p 要素を選択し、他のすべての p 要素に異なるスタイルを持たせるだけです:

p:nth-of-type(even) {background-color: lime;}

n を奇数 (偶数) または偶数 (奇数) に設定することに加えて、n を式に設定することもできます。 , nth-of-type(3n+2)

:nth-last-of-type() は、最後の要素から数えて指定された要素を選択します

言うまでもなく、誰もがこのセレクターを想像できるでしょう。要素のタイプを参照することを除いて、前の :nth-last-child と同じように使用されます。

IE6-8 および FF3.0 でも、ブラウザはこのセレクターをサポートしていません

: first-of-type は、親要素の下にある最初の同様の子要素を選択します。上位要素の最後の同様のサブ要素

:nth-of-type,:nth-last-of-type;: first-of-type と :last-of-type は実際にはあまり意味がありません。 、以前に説明した nth-child などのセレクターはこの機能を実現できますが、興味がある場合は、それについて学ぶことはできますが、実用的な価値はあまり高くないと個人的には思います。このような記述は参照のみを目的としています。

:only-child は、要素がその親要素の唯一の子要素であることを意味します

<ul>
<li>1</li>
<li>2</li>
</ul>
<ul>
<li>3</li>
</ul>

ul に p 要素が 1 つしかないときにこの li のスタイルを変更する必要がある場合は、今すぐそれを使用できます:only-child、例: ul li {padding-left:10px;}

ul li:only-child {padding-left:15px}

:only-of-type は要素を親として選択します同じタイプの唯一のサブ要素

は、要素に多数のサブ要素があり、1 つのサブ要素だけが固有であることを意味します。その後、この選択方法を使用して、Say などの唯一のサブ要素を選択できます。

<section>
<h2>伪类选择器的用法</h2>
<p>CSS3 伪类选择器only-of-type的用法</p>
<p>CSS3 伪类选择器only-of-type的用法</p>
</section>

上記の h2 要素のみを選択したい場合は、次のように記述できます。

h2:only-of-type{color:red;}

:empty 選択した要素にはコンテンツがありません

:empty は、コンテンツのない要素を選択するために使用されます。ここでの「コンテンツなし」とは、たとえスペースであっても、コンテンツがまったくないことを意味します。表示するには、次のように記述できます: p:empty {display: none;}

以上がCSS3 にはどのような擬似クラス セレクターがあるのか​​、また擬似クラス セレクター nth-child() の使用方法は何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。