此選擇器能夠?qū)崿F(xiàn)對(duì)元素的精準(zhǔn)匹配元素，主要有:

: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

? ?:first-child選擇某個(gè)元素的第一個(gè)子元素；:last-child選擇某個(gè)元素的最后一個(gè)子元素；:nth-child()選擇某個(gè)元素的一個(gè)或多個(gè)特定的子元素；:nth-last-child()選擇某個(gè)元素的一個(gè)或多個(gè)特定的子元素，從這個(gè)元素的最后一個(gè)子元素開始算；:nth-of-type()選擇指定的元素；:nth-last-of-type()選擇指定的元素，從元素的最后一個(gè)開始計(jì)算；:first-of-type選擇一個(gè)上級(jí)元素下的第一個(gè)同類子元素；:last-of-type選擇一個(gè)上級(jí)元素的最后一個(gè)同類子元素；:only-child選擇的元素是它的父元素的唯一一個(gè)了元素；:only-of-type選擇一個(gè)元素是它的上級(jí)元素的唯一一個(gè)相同類型的子元素；:empty選擇的元素里面沒有任何內(nèi)容。

1、:first-child

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

2、:last-child

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

3、:nth-child()

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

這種不式不能引用負(fù)值，也就是說li:nth-child(-3)是不正確的使用方法。

:nth-child(2n),這中方式是前一種的變身，我們可以選擇n的2倍數(shù)，當(dāng)然其中“2”可以換成你自己需要的數(shù)字.demo li:nth-child(2n) {background: lime;} 等于.demo

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

:nth-child(-n+5)這種選擇器這個(gè)是選擇第5個(gè)前面的
n=0 －－》 -n+5=5 －－》 選擇了第5個(gè)li
n=1 －－》 -n+5=4 －－》 選擇了第4個(gè)li
n=2 －－》 -n+5=3 －－》 選擇了第3個(gè)li
n=3 －－》 -n+5=2 －－》 選擇了第2個(gè)li
n=4 －－》 -n+5=1 －－》 選擇了第1個(gè)li
n=5 －－》 -n+5=0 －－》 沒有選擇任何元素

4、:nth-last-child()

.demo li:nth-last-child(4) {background: lime;}

5、:nth-of-type

:nth-of-type類似于:nth-child，不同的是他只計(jì)算選擇器中指定的那個(gè)元素

6、:nth-last-of-type

這個(gè)選擇器不用說大家都能想得到了，他和前面的:nth-last-child一樣使用，只是他指一了元素的類型而以。

7、:first-of-type和:last-of-type

:first-of-type和:last-of-type這兩個(gè)選擇器就類似于:first-child和:last-child;不同之處就是指定了元素的類型。

8、:only-child和:only-of-type

":only-child"表示的是一個(gè)元素是它的父元素的唯一一個(gè)子元素。

9、:empty

:empty是用來選擇沒有任何內(nèi)容的元素，這里沒有內(nèi)容指的是一點(diǎn)內(nèi)容都沒有，哪怕是一個(gè)空格，比如說，你有三個(gè)段落，其中一個(gè)段落什么都沒有，完全是空的，你想這個(gè)p不顯示