前面花了兩節(jié)內(nèi)容分別在《CSS3選擇器——基本選擇器》和《CSS3選擇器——屬性選擇器》介紹了CSS3選擇器中的基本選擇器和屬性選擇器使用方法，今天要和大家一起學(xué)習(xí)CSS3選擇器中的第三部分,，也是最後一部分——偽類選擇器,。偽類選擇器對於大家來說最熟悉的莫過於:link,:focus,:hover之類的了，因為這些在平時中是常用到的偽類選擇器,，那麼先和大家一起簡單總結(jié)一下CSS中常用的偽類選擇器的使用方法,，最後把重心放到CSS3新增加的":nth-child"選擇器的使用方法。

和前面一樣,，在開始之前先創(chuàng)建一個Dom:

<div class="demo clearfix">
  <ul class="clearfix">
	<li class="first links odd" id="first"><a href="">1</a></li>
	<li class="links even"><a href="">2</a></li>
	<li class="links odd"><a href="">3</a></li>
	<li class="links even"><a href="">4</a></li>
	<li class="links odd"><a href="">5</a></li>
	<li class="links even"><a href="">6</a></li>
	<li class="links odd"><a href="">7</a></li>
	<li class="links even"><a href="">8</a></li>
	<li class="links odd"><a href="">9</a></li>
	<li class="links even last" id="last"><a href="">10</a></li>
</ul>
</div>
		

同樣先加上一些樣式,，讓他看起來好看一點

			.demo {
				width: 300px;
				border: 1px solid #ccc;
				padding: 10px;			
			}
			.demo li {
				border: 1px solid #ccc;
				padding: 2px;
				float: left;
				margin-right:4px;
			}
		 	.demo a {
				float: left;
				display: block;
				height: 20px;
				line-height: 20px;
				width: 20px;
				-moz-border-radius: 10px;
				-webkit-border-radius: 10px;
				border-radius: 10px;
				text-align: center;
				background: #f36;
				color: green;
				text-decoration: none;
			}
		

最出效果：

CSS的偽類語法和別的語法有點不一樣,，其主要有兩種語法表達方式

			E:pseudo-class {property:value}/*其中E為元素;pseudo-class為偽類名稱;property是css的屬性;value為css的屬性值*/
		

示例：

			a:link {color:red;}
		

第二種寫法

			E.class:pseudo-class{property:value}
		

如：

			a.selected:hover {color: blue;}
		

下面開始我們一起來看看這些偽類的具體應(yīng)用：

一,、動態(tài)偽類

動態(tài)偽類，因為這些偽類並不存在於HTML中,而只有當(dāng)用戶和網(wǎng)站交互的時候才能體現(xiàn)出來,，動態(tài)偽類包含兩種,，第一種是我們在鏈接中常看到的錨點偽類,，如":link",":visited";另外一種被稱作用戶行為偽類,，如“:hover”,":active"和":focus"。先來看最常見的錨點偽類

			.demo a:link {color:gray;}/*鏈接沒有被訪問時前景色為灰色*/
			.demo a:visited{color:yellow;}/*鏈接被訪問過後前景色為黃色*/
			.demo a:hover{color:green;}/*鼠標懸浮在鏈接上時前景色為綠色*/
			.demo a:active{color:blue;}/*鼠標點中激活鏈接那一下前景色為藍色*/
		

對於這四個錨點偽類的設(shè)置,，有一點需要特別注意,，那就是他們的先後順序，要讓他們遵守一個愛恨原則LoVe/HAte,也就是Link--visited--hover--active,。如果你把順序搞錯了會給你帶來意想不到的錯誤,，大家對於這個應(yīng)該很熟悉的，如果是初學(xué)的朋友,，可以私下練習(xí)一下,。其中:hover和:active又同時被列入到用戶行為偽類中，他們所表達的意思是：

1. :hover用於當(dāng)用戶把鼠標移動到元素上面時的效果,；
2. :active用於用戶點擊元素那一下的效果（正發(fā)生在點的那一下,，鬆開鼠標左鍵此動作也就完成了）
3. :focus用於元素成為焦點，這個經(jīng)常用在表單元素上。

本站的button就採用了這幾處效果：

			.form-submit {
			    -moz-transition: border-color 0.218s ease 0s;
					-webkit-transition: border-color 0.218s ease 0s;
					-o-transition: border-color 0.218s ease 0s;
					-ms-transition: border-color 0.218s ease 0s;
					transition: border-color 0.218s ease 0s;
			    background: none repeat scroll 0 0 #F5F5F5;
			    border: 1px solid #DCDCDC;
					-moz-border-radius: 2px 2px 2px 2px;
					-webkit-border-radius: 2px 2px 2px 2px;
			    border-radius: 2px 2px 2px 2px;
			    color: #333333;
			    font: 11px/27px arial,sans-serif;
			    height: 27px;
			    padding: 0 8px;
			    text-align: center;
			    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
			}
			.form-submit:hover {
			    background-color: #F8F8F8;
			    border-color: #C6C6C6;
					-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
					-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
			    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
			    color: #333333;
			}
			.form-submit:active {
			    border-color: #4D90FE;
					-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) inset;
					-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) inset;
			    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) inset;
			    color: #000000;
			}
			.form-submit:focus {
			    border: 1px solid #4D90FE !important;
			}
		

你可以點擊這裡體驗一下這種效果,。

對於:hover在IE6下只有a元素支持,，:active只有IE7-6不支持，:focus在IE6-7下不被支持,。

二,、UI元素狀態(tài)偽類

我們把":enabled",":disabled",":checked"偽類稱為UI元素狀態(tài)偽類，這些主要是針對於HTML中的Form元素操作,，最常見的比如我們"type="text"有enable和disabled兩種狀態(tài),，前者為可寫狀態(tài)後者為不可狀態(tài)；另外"type="radio"和"type="checkbox""有"checked"和"unchecked"兩種狀態(tài),。來看兩個實例,，比如說你想將"disabled"的文本框與別的文本框區(qū)別出來，你就可以這樣應(yīng)用

			input[type="text"]:disabled {border:1px solid #999;background-color: #fefefe;}
		

這樣一來就把頁面中禁用的文本框應(yīng)用了一個不同的樣式,。那麼對於其他幾個用法是一樣的,，這裡就不在講述。IE6-8不支持":checked",":enabled",":disabled"這三種選擇器,。

三,、CSS3的:nth選擇器

這節(jié)內(nèi)容才是關(guān)鍵，也是CSS3選擇器最新部分,，有人也稱這種選擇器為CSS3結(jié)構(gòu)類,，下面我們通過實際的應(yīng)用來具體瞭解他們的使用和區(qū)別，首先列出他具有的選擇方法：

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選擇的元素裡面沒有任何內(nèi)容,。

下面我們針對上面所列的各種選擇器,，一個一個來介紹：

1、:first-child

:first-child是用來選擇某個元素的第一個子元素,，比如我們這裡的這個demo,，你想讓列表中的"1"具有與從不同的樣式,，我們就可以使用:first-child來實現(xiàn)：

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

在沒有這個選擇器出現(xiàn)之前，我們都需在要第一個li上加上一個不同的class名,，比如說“first”,，然後在給他應(yīng)用不同的樣式

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

其實這兩種最終效果是一樣的，只是後面這種,，我們需要在html增加一個額外的class名,，請看效果：

IE6不支持:first-child選擇器。

2,、:last-child

:last-child選擇器與:first-child選擇器的作用類似,，不同的是":last-child"選擇是的元素的最後一個子元素。比如說,，我們需要單獨給列表最後一項一個不同的樣式,，我們就可以使用這個選擇器，如：

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

這個效果和以前在列表上的“l(fā)ast”的class是一樣的

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

他們效顯示的效果都是一致的,，如圖所示,；

3、:nth-child()

: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ù)
		

:nth-child()可以定義他的值（值可以是整數(shù)，也可以是表達式）,，如上面所示,，用來選擇特定的子元素，對於這個我們直接看實例,，比我說的更好理解,。

:nth-child(3),選擇某元素下的第三個子元素,，（這裡的3可以是你自己需要的數(shù)字）,，比如說，我需要選擇列表中的第三個li元素,，那麼我們可以直接這樣使用：

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

效果如下所示：

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

:nth-child(n),，其中n是一個簡單的表達式,，那麼"n"取值是從“0”開始計算的，到什麼時候結(jié)束我也不知道,，如果你在實際應(yīng)用中直接這樣使用的話,，將會選中所有子元素，比如說,，在我們的demo中,，你在li中使用":nth-child(n)",那麼將選中所有的"li",如：

			.demo li:nth-child(n) {background: lime;} 
			等於
			.demo li {background: lime;}
		

他其實是這樣計算的

			n=0 －－》 沒有選擇元素
			n=1 －－》 選擇第一個li,
			n=2 －－》 選擇第二個li,後在的依此類推,，這樣下來就選中了所有的li
		

請看效果：

請注意了，這裡的“n”只能是"n",，不能使用其他字母代替,，不然會沒有任何效果的。

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

			.demo li:nth-child(2n) {background: lime;}
			等於
			.demo li:nth-child(even) {background: lime;}
		

我們來看一下其計算的過程：

			n=0 －－》 2n=0 －－》 沒有選中任何元素,，
			n=1 －－》 2n=2 －－》 選擇了第二個li
			n=2 －－》 2n＝4 －－》 選擇了第四個li,，後面的依此類推
		

如果是“2n”這樣跟我們以使用"even"命名class定義樣式，所起到的效果是一樣的,，如圖所示：

“:nth-child(2n)”也等於":nth-child(even)"效果,。

:nth-child(2n-1),這個選擇器是在":nth-child(2n)"基礎(chǔ)上演變過來的，上面說了人是選擇偶數(shù),，那麼我們在他的基礎(chǔ)上減去“1”就變成奇數(shù)選擇,，如：

			.demo li:nth-child(2n-1) {background: lime;}
		

我們來看看其實現(xiàn)過程

			n=0 －－》 2n-1=-1 －－》 也沒有選中任何元素，
			n=1 －－》 2n-1=1 －－》 選擇第一個li
			n=2 －－》 2n-1=3 －－》 選擇第三個li,後面的依此類推
		

其實實現(xiàn)這種奇數(shù)效果,，我們還可以使用":nth-child(2n+1)"和":nth-child(odd)",一起來看他們的效果

:nth-child(n+5)這個選擇器是選擇從第五個元素開始選擇,，這裡的數(shù)字你可以自己定義，如：

			.demo li:nth-child(n+5) {background: lime;}
		

按前面的計算方法,，我們來看看,，

			n=0 －－》 n+5=5 －－》  選中第5個li
			n=1 －－》 n+5=6 －－》  選擇第6個li，後面的就不列出來了,，原理一樣
		

你可以使用這種方法選擇你需要開始選擇的元素位置,，也就是說換了數(shù)字，起始位置就變了,，看下在的效果圖：

:nth-child(-n+5)這種選擇器剛好和上面的選擇器相反,，這個是選擇第5個前面的，如：

			.demo li:nth-child(-n+5) {background: lime;}
		

如果不清楚怎麼一回事,，你只要計算一下就明白了

			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 －－》 沒有選擇任何元素
		

從上面的計算方法中,，大家很清楚的知道是怎麼得來的，最後我們一起看看效果吧：

:nth-child(4n+1)這種方法是實現(xiàn)隔幾選一的效果,，比如我們這裡是隔三選一,，如果你把"4"換成別的數(shù)字那就是另外的一種隔法了，比如這個實例

			.demo li:nth-child(4n+1) {background: lime;}
		

我們主要來看其計算出來的結(jié)果

			n=0 －－》4n+1=1 －－》選擇了第一個li
			n=1 －－》4n+1=5 －－》選擇了第五個li
			n=2 －－》4n+1=9 －－》選擇了第九個li
		

效果如下

IE6-8和FF3-瀏覽器不支持":nth-child"選擇器,。

4,、:nth-last-child()

":nth-last-child()"選擇器和前面的":nth-child()"很相似，只是這裡多了一個last,，所以他起的作用就和前面的":nth-child"不一樣了,，他只要是從最後一個元素開始算,，來選擇特定元素。我們來看幾個實例：

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

上面代碼表示選擇倒數(shù)第四個列表項,，效果如下：

其中":nth-last-child(1)"和":last-child"所起作用是一樣的,，都表示的是選擇最後一個元素。

另外":nth-last-child()"也可以像“:nth-child()”一樣,，可以使用表達式來選擇特定元素,，下面我們來看幾個特殊的表達式所起的作用

:nth-last-child(2n),這個表示的是從元素後面計算，選擇的是偶數(shù)個數(shù),，從而反過來說就是選擇元素的奇數(shù),，和前面的":nth-child(2n+1)",":nth-child(2n-1)",":nth-child(odd)"所起的作用是一樣的。如：

			.demo li:nth-last-child(2n) {background: lime;}
			.demo li:nth-last-child(even) {background: lime;}
			等於
			.demo li:nth-child(2n+1) {background: lime;}
			.demo li:nth-child(2n-1) {background: lime;}
			.demo li:nth-child(odd) {background: lime;}
		

請看效果：

:nth-last-child(2n-1)這個選擇器剛好跟上面的相反,，從後面計算選擇的是奇數(shù),，而從前面計算選擇的就是偶數(shù)位了，這個前面的":nth-child(2n)"之類是相同的效果,，如：

			.demo li:nth-last-child(2n+1) {background: lime;}
			.demo li:nth-last-child(2n-1) {background: lime;}
			.demo li:nth-last-child(odd) {background: lime;}
			等於：
			.demo li:nth-child(2n) {background: lime;}
			.demo li:nth-child(even) {background: lime;}
		

效果如下

看了這幾個實例,，大家都知道":nth-last-child()"和"nth-child()"使用方法是一樣的，只不過他們的區(qū)別是“:nth-child()”是從元素的第一個開始計算,，而“:nth-last-child()”是從元素的最後一個開始計算,，他們的計算方法都是一樣的。同樣在IE6-8和FF3.0-瀏覽器不支持“:nth-last-child()”選擇器,。

5,、:nth-of-type

:nth-of-type類似於:nth-child，不同的是他只計算選擇器中指定的那個元素,其實我們前面的實例都是指定了具體的元素,，這個選擇器主要對用來定位元素中包含了好多不同類型的元素是很有用處,，比如說，我們div.demo下有好多p元素,，li元素,，img元素等，但我只需要選擇p元素,，並讓他每隔一個p元素就有不同的樣式,，那我們就可以簡單的寫成：

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

其實這種使用和:nth-child使用是一樣的,，也可以使用:nth-child的那些表達式和使用方法,，唯一不同的是這種指定了元素的類型而以。同樣在IE6-8和FF3.0-瀏覽器不支持這種選擇器

6,、:nth-last-of-type

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

同樣在IE6-8和FF3.0-瀏覽器不支持這種選擇器

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

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

:nth-of-type,:nth-last-of-type;:first-of-type和:last-of-type實際意義並不是很大，我們前面講的:nth-child之類選擇器就能達到這此功能,，不過大家要是感興趣還是可以瞭解一下,，個人認為實用價值並不是很大。此類說法僅供參考,。

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

":only-child"表示的是一個元素是它的父元素的唯一一個子元素。我們一起來看一個實例更好理解

			<div class="post">
	    	<p>Lorem ipsum dolor sit amet, consectetur</p>
	    	<p>Lorem ipsum dolor sit amet, consectetur</p>
	    </div>
	    <div class="post">
	    	<p>Lorem ipsum dolor sit amet, consectetur</p>
	    </div>	    
		

css樣式

			.demo .post p {background: lime;}
		

初步效果

如果我需要在div.post只有一個p元素的時候,，改變這個p的樣式,，那麼我們現(xiàn)在就可以使用:only-child,如：

			.demo .post p {background: lime;}
			.demo .post p:only-child {background: red;}
		

此時只有div.post只有一個子元素p時，那麼他的背景色將會改變,如圖所示：

:only-of-type是表示一個元素他有很多個子元素,，而其中只有一個子元素是唯一的,，那麼我們使用這種選擇方法就可以選擇中這個唯一的子元素，比如說

			<div class="post">
	    	<div>Lorem ipsum dolor sit amet, consectetur</div>
	    	<p>Lorem ipsum dolor sit amet, consectetur</p>
			  <div>Lorem ipsum dolor sit amet, consectetur</div>
	    </div>
		

如果我們想只選擇中上面中的p元素,，我們就可以這樣寫,，

			p:only-of-type{background-color:red;}
		

IE6-8瀏覽器不支持:only-child選擇器；IE6-8和FF3.0-瀏覽器不支持:only-of-type選擇器,。

9,、:empty

:empty是用來選擇沒有任何內(nèi)容的元素，這裡沒有內(nèi)容指的是一點內(nèi)容都沒有,，哪怕是一個空格,，比如說，你有三個段落,，其中一個段落什麼都沒有,，完全是空的，你想這個p不顯示,，那你就可這樣來寫：

			p:empty {display: none;}
		

IE6-8瀏覽器不支持:empty選擇器

三,、否定選擇器（:not）

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

			input:not([type="submit"]) {border: 1px solid red;}
		

否定選擇器 :not(),，可以讓你定位不匹配該選擇器的元素,。IE6-8瀏覽器不支持:not()選擇器

四、偽元素

CSS中的偽元素大家以前看過：:first-line,:first-letter,:before,:after;那麼在CSS3中,，他對偽元素進行了一定的調(diào)整,，在以前的基礎(chǔ)上增加了一個“：”也就是現(xiàn)在變成了“::first-letter,::first-line,::before,::after”另外他還增加了一個“::selection”,兩個“：：”和一個“：”css3中主要用來區(qū)分偽類和偽元素，到目前來說,，這兩種方式都是被接受的,，也就是說不管使用哪種寫法所起的作用都是一樣的,，只是一個書寫格式不同而以。

那麼我們簡單瞭解一下他們的作用

::first-line選擇元素的第一行,，比如說改變每個段落的第一行文本的樣式,，我們就可以使用這個

			p::first-line {font-weight:bold;}
		

::first-letter選擇文本塊的第一個字母，除非在同一行裡面包含一些其它元素,，不過這個主要運用於段落排版上多,，比如說首字下沉，

			p::first-letter {font-size: 56px;float:left;margin-right:3px;}
		

::before和::after這兩個主要用來給元素的前面或後面插入內(nèi)容,，這兩個常用"content"配合使用,，見過最多的就是清除浮動，

			.clearfix:before,
			.clearfix:after {
			     content: ".";
			     display: block;
			     height: 0;
			     visibility: hidden;
			  }
			 .clearfix:after {clear: both;}
			 .clearfix {zoom: 1;}
		

當(dāng)然可以利用他們製作出其他更好的效果,，比如本站首面的那個三角紙張效果,，也是通過這個來實現(xiàn)的。

::selection用來改變?yōu)g覽網(wǎng)頁選中文的默認效果,，有關(guān)於“::selection”使用,，大家可以點擊《CSS ::Selection》。

那麼有關(guān)於CSS3的選擇器到這裡就全部介紹完了,，如果你對這個東西感興趣,，你可以點擊這裡瞭解更多的知識。如果你全部看完了這三章關(guān)於CSS3選擇器的文章你很快能發(fā)現(xiàn),，其實有很多選擇器和jquery中的選擇器是很相似的,，新的東西並不多，個人認為最實用的就是:nth-child這些,，在特定的環(huán)境中所起的作用還是蠻大的,，如果你是一位前端的大膽嘗試者，你可以嘗試這些新的選擇器使用方法,，這可以讓你省去不少的標籤,，如果你認為還不實用在項目中，但讓你學(xué)習(xí)還是蠻不錯的,。哈,。。,。,。

如需轉(zhuǎn)載煩請註明出處：W3CPLUS