? ???? ?? ??? ???? ??? ???? ???? ? ????.

: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? ??? ? ?? ?? ??? ?????. :last-child? ??? ??? ?? ??? ?????. :nth -child()? ?? ??? ?????. ??? ?? ?? ??; :nth-last-child()? ? ??? ??? ?? ???? ???? ??? ?? ??? ?? ?? ??? ?????. ;:nth-of-type()? ??? ??? ?????. nth-last-of-type()? ??? ???? ???? ??? ??? ?????. :first-of-type? ?? ?? ??? ? ?? ??? ?????. ?? ??? ??? ??? ??? ?? ?????. :only-child? ?? ??? ??? ??? ??? ?????. :only-of-type? ?? ??? ??? ??? ??? ?? ?????. ?? ??; :empty? ??? ??? ??? ????.

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開始計算*/
: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;}

?? ??? ???? ?? ?? ??? ? ????. ?, li:nth-child(-3)? ??? ??????.

:nth-child(2n), ? ??? ?? ??? ?????. n? ?? 2?? ??? ? ????. ?? "2"? ??? ??? ?? ? ????. ?? li:nth-child( 2n) {??: ??;} .demo

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

:nth-child(-n+5)? ?????. ? ????
n=0 --> -n+5=5 --> 5?? li? ?????.
n=1 - -》 -n+5=4 --》 4?? li? ???????
n=2 --》 -n+5=3 --》 3?? li? ???????
n=3 --- 》 -n+5= 2 --》 ? ?? li
n=4? ??????? --》 -n+5=1 --》 ? ?? 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? ?????. ???? ??? ??? ????. ???? ??? ??

6. :nth-last-of-type

?? ?? ?? ? ???? ?? :nth-last-child ? ???? ?????. ?? ??.

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

: ? ?? ???: first-of-type ? :last-of-type? :first-child ? :last-child? ?????. ???? ?? ??? ????? ????.

8, :only-child ? :only-of-type

":only-child"? ??? ?? ??? ??? ?? ???? ?????.

9, :????

:empty? ??? ?? ??? ???? ? ?????. ??? ??? ?? ??? ?????. ?? ?? ??? ? ??? ? ? ??? ???? ?? ??? ?? ????. ?????