このセレクターは、主に以下の要素を正確に一致させることができます: :first-child は要素の最初の子要素を選択します; :last-child は要素の最後の子要素を選択します; :nth -child() は 1 つ以上を選択します要素の特定の子要素を選択します。 :nth-last-child() は、この要素の最後の子要素から開(kāi)始して、要素の 1 つ以上の特定の子要素を選択します。 ;:nth-of-type() は、指定された要素を選択します。 nth-last-of-type() は、最後の要素から數(shù)えて、指定された要素を選択します。 :first-of-type は、上位要素の下にある最初の要素を選択します。 :last-of-type は、同じ型の子要素を選択します。親要素と同じ型の最後の子要素。 :only-child は親要素の唯一の要素を選択します。 :only-of-type は要素と同じ型の唯一の子要素を選択します。親要素; :empty で選択された要素にはコンテンツがありません。

1, :first-child

:fist-child
:last-child
:nth-child()
:nth-last-child()
:nth-of-type()
:nth-last-of-type()
:first-of-type
:last-of-type
:only-child
:only-of-type
:empty

2, :last-child

.demo li:first-child {background: green; border: 1px dotted blue;}.demo li.first {background: green; border: 1px dotted blue;}

3, :nth-child()

.demo li:last-child {background: green; border: 2px dotted blue;}
.demo li.last {background: green; border: 2px dotted blue;}

この種の式は負(fù)の値を參照できませんつまり、li:nth-child(-3) は間違った使用法です。

:nth-child(length);/*參數(shù)是具體數(shù)字*/
:nth-child(n);/*參數(shù)是n,n從0開(kāi)始計(jì)算*/
:nth-child(n*length)/*n的倍數(shù)選擇，n從0開(kāi)始算*/
:nth-child(n+length);/*選擇大于length后面的元素*/
:nth-child(-n+length)/*選擇小于length前面的元素*/
:nth-child(n*length+1);/*表示隔幾選一*/
//上面length為整數(shù)
.demo li:nth-child(3) {background: lime;}

n=1 - -》 -n+5=4 --》 4番目のliが選択されました
n=2 --》 -n+5=3 --》 3番目のliが選択されました
n=3 --- 》 -n+5= 2 --》 2番目のli
n=4が選択されます --》 -n+5=1 --》 1番目のli
n=5が選択されます --》 -n+5= 0--》要素は選択されていません


4, :nth-last-child()

li:nth-child(even) {background: lime;}

5, :nth-of-type

:nth-of-type は :nth-child に似ていますが、違いはカウントのみであることです。セレクター

6 で指定された要素。 :nth-last-of-type

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

7. :first-of-type と :last-of-type

: first-of-type と :last-of-type の 2 つのセレクターは、:first-child と :last-child に似ています。違いは、要素のタイプが指定されていることです。

8、:only-child および :only-of-type

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

9、:空

:empty は、コンテンツのない要素を選択するために使用されます。ここでのコンテンツなしとは、スペースであっても、コンテンツがまったくないことを意味します。表示されます