CSS3 選擇器——僞類選擇器

前面花了兩節內容分別在《CSS3選擇器——基本選擇器》和《CSS3選擇器——屬性選擇器》介紹了CSS3選擇器中的基本選擇器和屬性選擇器使用方法，今天要和你們一塊兒學習CSS3選擇器中的第三部分，也是最後一部分——僞類選擇器。僞類選擇器對於你們來講最熟悉的莫過於:link,:focus,:hover之類的了，由於這些在平時中是經常使用到的僞類選擇器，那麼先和你們一塊兒簡單總結一下CSS中經常使用的僞類選擇器的使用方法，最後把重心放到CSS3新增長的":nth-child"選擇器的使用方法。

和前面同樣，在開始以前先建立一個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;}

下面開始咱們一塊兒來看看這些僞類的具體應用：

1、動態僞類

動態僞類，由於這些僞類並不存在於HTML中,而只有當用戶和網站交互的時候才能體現出來，動態僞類包含兩種，第一種是咱們在連接中常看到的錨點僞類，如":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;}/*鼠標點中激活連接那一下前景色爲藍色*/

對於這四個錨點僞類的設置，有一點須要特別注意，那就是他們的前後順序，要讓他們遵照一個愛恨原則LoVe/HAte,也就是Link--visited--hover--active。若是你把順序搞錯了會給你帶來意想不到的錯誤，你們對於這個應該很熟悉的，若是是初學的朋友，能夠私下練習一下。其中:hover和:active又同時被列入到用戶行爲僞類中，他們所表達的意思是：

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

本站的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下不被支持。

2、UI元素狀態僞類

咱們把":enabled",":disabled",":checked"僞類稱爲UI元素狀態僞類，這些主要是針對於HTML中的Form元素操做，最多見的好比咱們"type="text"有enable和disabled兩種狀態，前者爲可寫狀態後者爲不可狀態；另外"type="radio"和"type="checkbox""有"checked"和"unchecked"兩種狀態。來看兩個實例，好比說你想將"disabled"的文本框與別的文本框區別出來，你就能夠這樣應用

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

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

3、CSS3的:nth選擇器

這節內容纔是關鍵，也是CSS3選擇器最新部分，有人也稱這種選擇器爲CSS3結構類，下面咱們經過實際的應用來具體瞭解他們的使用和區別，首先列出他具備的選擇方法：

1. :fist-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選擇的元素裏面沒有任何內容。

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

一、:first-child

:first-child是用來選擇某個元素的第一個子元素，好比咱們這裏的這個demo，你想讓列表中的"1"具備與從不一樣的樣式，咱們就可使用:first-child來實現：

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

在沒有這個選擇器出現以前，咱們都需在要第一個li上加上一個不一樣的class名，好比說「first」，而後在給他應用不一樣的樣式

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

其實這兩種最終效果是同樣的，只是後面這種，咱們須要在html增長一個額外的class名，請看效果：

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

二、:last-child

:last-child選擇器與:first-child選擇器的做用相似，不一樣的是":last-child"選擇是的元素的最後一個子元素。好比說，咱們須要單獨給列表最後一項一個不一樣的樣式，咱們就可使用這個選擇器，如：

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

這個效果和之前在列表上的「last」的class是同樣的

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

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

三、:nth-child()

: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爲整數 

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

:nth-child(3),選擇某元素下的第三個子元素，（這裏的3能夠是你本身須要的數字），好比說，我須要選擇列表中的第三個li元素，那麼咱們能夠直接這樣使用：

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

效果以下所示：

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

:nth-child(n)，其中n是一個簡單的表達式，那麼"n"取值是從「0」開始計算的，到何時結束我也不知道，若是你在實際應用中直接這樣使用的話，將會選中全部子元素，好比說，在咱們的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倍數，固然其中「2」能夠換成你本身須要的數字，如：

.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)"基礎上演變過來的，上面說了人是選擇偶數，那麼咱們在他的基礎上減去「1」就變成奇數選擇，如：

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

咱們來看看其實現過程

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

其實實現這種奇數效果，咱們還可使用":nth-child(2n+1)"和":nth-child(odd)",一塊兒來看他們的效果

:nth-child(n+5)這個選擇器是選擇從第五個元素開始選擇，這裏的數字你能夠本身定義，如：

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

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

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

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

: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)這種方法是實現隔幾選一的效果，好比咱們這裏是隔三選一，若是你把"4"換成別的數字那就是另外的一種隔法了，好比這個實例

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

咱們主要來看其計算出來的結果

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

效果以下

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

四、:nth-last-child()

":nth-last-child()"選擇器和前面的":nth-child()"很類似，只是這裏多了一個last，因此他起的做用就和前面的":nth-child"不同了，他只要是從最後一個元素開始算，來選擇特定元素。咱們來看幾個實例：

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

上面代碼表示選擇倒數第四個列表項，效果以下：

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

另外":nth-last-child()"也能夠像「:nth-child()」同樣，可使用表達式來選擇特定元素，下面咱們來看幾個特殊的表達式所起的做用

:nth-last-child(2n),這個表示的是從元素後面計算，選擇的是偶數個數，從而反過來講就是選擇元素的奇數，和前面的":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)這個選擇器恰好跟上面的相反，從後面計算選擇的是奇數，而從前面計算選擇的就是偶數位了，這個前面的":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()"使用方法是同樣的，只不過他們的區別是「:nth-child()」是從元素的第一個開始計算，而「:nth-last-child()」是從元素的最後一個開始計算，他們的計算方法都是同樣的。一樣在IE6-8和FF3.0-瀏覽器不支持「:nth-last-child()」選擇器。

五、: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-瀏覽器不支持這種選擇器

六、:nth-last-of-type

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

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

七、: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之類選擇器就能達到這此功能，不過你們要是感興趣仍是能夠了解一下，我的認爲實用價值並非很大。此類說法僅供參考。

八、: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的樣式，那麼咱們如今就可使用: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選擇器。

九、:empty

:empty是用來選擇沒有任何內容的元素，這裏沒有內容指的是一點內容都沒有，哪怕是一個空格，好比說，你有三個段落，其中一個段落什麼都沒有，徹底是空的，你想這個p不顯示，那你就可這樣來寫：

p:empty {display: none;}

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

3、否認選擇器（:not）

否認選擇器和jq中的:not選擇器如出一轍，就拿form中的元素來講明這個選擇器的用法，好比你想對form中全部input加邊框，但又不想submit也起變化，此時就可使用:not爲實現

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

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

4、僞元素

CSS中的僞元素你們之前看過：:first-line,:first-letter,:before,:after;那麼在CSS3中，他對僞元素進行了必定的調整，在之前的基礎上增長了一個「：」也就是如今變成了「::first-letter,::first-line,::before,::after」另外他還增長了一個「::selection」,兩個「：：」和一個「：」css3中主要用來區分僞類和僞元素，到目前來講，這兩種方式都是被接受的，也就是說無論使用哪一種寫法所起的做用都是同樣的，只是一個書寫格式不一樣而以。

那麼咱們簡單瞭解一下他們的做用

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

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

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

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

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

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

固然能夠利用他們製做出其餘更好的效果，好比本站首面的那個三角紙張效果，也是經過這個來實現的。

::selection用來改變瀏覽網頁選中文的默認效果，有關於「::selection」使用，你們能夠點擊《CSS ::Selection》。

那麼有關於CSS3的選擇器到這裏就所有介紹完了，若是你對這個東西感興趣，你能夠點擊這裏瞭解更多的知識。若是你所有看完了這三章關於CSS3選擇器的文章你很快能發現，其實有不少選擇器和jquery中的選擇器是很類似的，新的東西並很少，我的認爲最實用的就是:nth-child這些，在特定的環境中所起的做用仍是蠻大的，若是你是一位前端的大膽嘗試者，你能夠嘗試這些新的選擇器使用方法，這可讓你省去很多的標籤，若是你認爲還不實用在項目中，但讓你學習仍是蠻不錯的。哈。。。。

如需轉載煩請註明出處：W3CPLUS