CSS3的:nth選擇器

CSS3選擇器最新部分，有人也稱這種選擇器為CSS3結構類，下面我們通過實際的應用來具體了解他們的使用和區別，首先列出他具有的選擇方法：

1. :first-child選擇某個元素的第一個子元素；
2. :last-child選擇某個元素的最后一個子元素；
3. :nth-child()選擇某個元素的一個或多個特定的子元素；
4. :nth-last-child()選擇某個元素的一個或多個特定的子元素，從這個元素的最后一個子元素開始算；
5. :nth-of-type()選擇指定的元素；
6. :nth-last-of-type()選擇指定的元素，從元素的最后一個開始計算；
7. :first-of-type選擇一個上級元素下的第一個同類子元素；
8. :last-of-type選擇一個上級元素的最后一個同類子元素；
9. :only-child選擇的元素是它的父元素的唯一一個了元素；
10. :only-of-type選擇一個元素是它的上級元素的唯一一個相同類型的子元素；
11. :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);/*參數是具體數字*/ :nth-child(n);/*參數是n,n從0開始計算*/ :nth-child(n*length)/*n的倍數選擇，n從0開始算*/ :nth-child(n+length);/*選擇大於length后面的元素*/ :nth-child(-n+length)/*選擇小於length前面的元素*/ :nth-child(n*length+1);/*表示隔幾選一*/ //上面length為整數

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

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

:nth-child(2n),這中方式是前一種的變身，我們可以選擇n的2倍數，當然其中“2”可以換成你自己需要的數字

.demo li:nth-child(2n) {background: lime;} 等於 .demo li:nth-child(even) {background: lime;}
:nth-child(-n+5)這種選擇器這個是選擇第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 －－》 選擇了第2個li
			n=4 －－》 -n+5=1 －－》 選擇了第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

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

否定選擇器（:not）

否定選擇器和jq中的:not選擇器一模一樣，就拿form中的元素來說明這個選擇器的用法，比如你想對form中所有input加邊框，但又不想submit也起變化，此時就可以使用:not為實現