偽類選擇器對于大家來說最熟悉的莫過于:link,:focus,:hover之類的了，因?yàn)檫@些在平時(shí)中是常用到的偽類選擇器，那么先和大家一起簡單總結(jié)一下CSS中常用的偽類選擇器的使用方法，最后把重心放到CSS3新增加的":nth-child"選擇器的使用方法。

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


同樣先加上一些樣式，讓他看起來好看一點(diǎn)


最出效果：

CSS的偽類語法和別的語法有點(diǎn)不一樣，其主要有兩種語法表達(dá)方式
E:pseudo-class {property:value}/*其中E為元素;pseudo-color為偽類名稱;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)偽類，因?yàn)檫@些偽類并不存在于HTML中,而只有當(dāng)用戶和網(wǎng)站交互的時(shí)候才能體現(xiàn)出來，動態(tài)偽類包含兩種，第一種是我們在鏈接中?？吹降腻^點(diǎn)偽類，如":link",":visited";另外一種被稱作用戶行為偽類，如“:hover”,":active"和":focus"。先來看最常見的錨點(diǎn)偽類

.demo a:link {color:gray;}/*鏈接沒有被訪問時(shí)前景色為紅色*/
.demo a:visited{color:yellow;}/*鏈接被訪問過后前景色為黃色*/
.demo a:hover{color:green;}/*鼠標(biāo)懸浮在鏈接上時(shí)前景色為綠色*/
.demo a:active{color:blue;}/*鼠標(biāo)點(diǎn)中激活鏈接那一下前景色為藍(lán)色*/
對于這四個(gè)錨點(diǎn)偽類的設(shè)置，有一點(diǎn)需要特別注意，那就是他們的先后順序，要讓他們遵守一個(gè)愛恨原則LoVe/HAte,也就是Link--visited--hover--active。如果你把順序搞錯(cuò)了會給你帶來意想不到的錯(cuò)誤，大家對于這個(gè)應(yīng)該很熟悉的，如果是初學(xué)的朋友，可以私下練習(xí)一下。其中:hover和:active又同時(shí)被列入到用戶行為偽類中，他們所表達(dá)的意思是：

:hover用于當(dāng)用戶把鼠標(biāo)移動到元素上面時(shí)的效果；
:active用于用戶點(diǎn)擊元素那一下的效果（正發(fā)生在點(diǎn)的那一下，松開鼠標(biāo)左鍵此動作也就完成了）
:focus用于元素成為焦點(diǎn)，這個(gè)經(jīng)常用在表單元素上。
本站的button就采用了這幾處效果：

你可以點(diǎn)擊這里體驗(yàn)一下這種效果。

對于: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)。來看兩個(gè)實(shí)例，比如說你想將"disabled"的文本框與別的文本框區(qū)別出來，你就可以這樣應(yīng)用

input[type="text"]:disabled {border:1px solid #999;background-color: #fefefe;}
這樣一來就把頁面中禁用的文本框應(yīng)用了一個(gè)不同的樣式。那么對于其他幾個(gè)用法是一樣的，這里就不在講述。IE6-8不支持":checked",":enabled",":disabled"這三種選擇器。

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

:fist-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è)上級元素下的第一個(gè)同類子元素；
:last-of-type選擇一個(gè)上級元素的最后一個(gè)同類子元素；
:only-child選擇的元素是它的父元素的唯一一個(gè)了元素；
:only-of-type選擇一個(gè)元素是它的上級元素的唯一一個(gè)相同類型的子元素；
:empty選擇的元素里面沒有任何內(nèi)容。
下面我們針對上面所列的各種選擇器，一個(gè)一個(gè)來介紹：

1、:first-child

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

.demo li:first-child {background: green; border: 1px dotted blue;}
在沒有這個(gè)選擇器出現(xiàn)之前，我們都需在要第一個(gè)li上加上一個(gè)不同的class名，比如說“first”，然后在給他應(yīng)用不同的樣式

.demo li.first {background: green; border: 1px dotted blue;}
其實(shí)這兩種最終效果是一樣的，只是后面這種，我們需要在html增加一個(gè)額外的class名，請看效果：

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

2、:last-child

:last-child選擇器與:first-child選擇器的作用類似，不同的是":last-child"選擇是的元素的最后一個(gè)子元素。比如說，我們需要單獨(dú)給列表最后一項(xiàng)一個(gè)不同的樣式，我們就可以使用這個(gè)選擇器，如：

.demo li:last-child {background: green; border: 2px dotted blue;}
這個(gè)效果和以前在列表上的“last”的class是一樣的

.demo li.last {background: green; border: 2px dotted blue;}
他們效顯示的效果都是一致的，如圖所示；

3、:nth-child()

:nth-child()可以選擇某個(gè)的一個(gè)或多個(gè)特定的子元素，你可以按這種方式進(jìn)行選擇：

: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ù)
:nth-child()可以定義他的值（值可以是整數(shù)，也可以是表達(dá)式），如上面所示，用來選擇特定的子元素，對于這個(gè)我們直接看實(shí)例，比我說的更好理解。

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

.demo li:nth-child(3) {background: lime;}
效果如下所示：

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

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

.demo li:nth-child(n) {background: lime;}
等于
.demo li {background: lime;}
他其實(shí)是這樣計(jì)算的

n=0 －－》 沒有選擇元素
n=1 －－》 選擇第一個(gè)li,
n=2 －－》 選擇第二個(gè)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;}
我們來看一下其計(jì)算的過程：

n=0 －－》 2n=0 －－》 沒有選中任何元素，
n=1 －－》 2n=2 －－》 選擇了第二個(gè)li
n=2 －－》 2n＝4 －－》 選擇了第四個(gè)li，后面的依此類推
如果是“2n”這樣跟我們以使用"even"命名class定義樣式，所起到的效果是一樣的，如圖所示：

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

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

.demo li:nth-child(2n-1) {background: lime;}
我們來看看其實(shí)現(xiàn)過程

n=0 －－》 2n-1=-1 －－》 也沒有選中任何元素，
n=1 －－》 2n-1=1 －－》 選擇第一個(gè)li
n=2 －－》 2n-1=3 －－》 選擇第三個(gè)li,后面的依此類推
其實(shí)實(shí)現(xiàn)這種奇數(shù)效果，我們還可以使用":nth-child(2n+1)"和":nth-child(odd)",一起來看他們的效果

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

.demo li:nth-child(n+5) {background: lime;}
按前面的計(jì)算方法，我們來看看，

n=0 －－》 n+5=5 －－》 選中第5個(gè)li
n=1 －－》 n+5=6 －－》 選擇第6個(gè)li，后面的就不列出來了，原理一樣
你可以使用這種方法選擇你需要開始選擇的元素位置，也就是說換了數(shù)字，起始位置就變了，看下在的效果圖：

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

.demo li:nth-child(-n+5) {background: lime;}
如果不清楚怎么一回事，你只要計(jì)算一下就明白了

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 －－》 沒有選擇任何元素
從上面的計(jì)算方法中，大家很清楚的知道是怎么得來的，最后我們一起看看效果吧：

:nth-child(4n+1)這種方法是實(shí)現(xiàn)隔幾選一的效果，比如我們這里是隔三選一，如果你把"4"換成別的數(shù)字那就是另外的一種隔法了，比如這個(gè)實(shí)例
.demo li:nth-child(4n+1) {background: lime;}
我們主要來看其計(jì)算出來的結(jié)果

n=0 －－》4n+1=1 －－》選擇了第一個(gè)li
n=1 －－》4n+1=5 －－》選擇了第五個(gè)li
n=2 －－》4n+1=9 －－》選擇了第九個(gè)li
效果如下

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

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

.demo li:nth-last-child(4) {background: lime;}
上面代碼表示選擇倒數(shù)第四個(gè)列表項(xiàng)，效果如下：

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

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

:nth-last-child(2n),這個(gè)表示的是從元素后面計(jì)算，選擇的是偶數(shù)個(gè)數(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)這個(gè)選擇器剛好跟上面的相反，從后面計(jì)算選擇的是奇數(shù)，而從前面計(jì)算選擇的就是偶數(shù)位了，這個(gè)前面的":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;}
效果如下

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

5、:nth-of-type

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

.demo p:nth-of-type(even) {background-color: lime;}
其實(shí)這種使用和:nth-child使用是一樣的，也可以使用:nth-child的那些表達(dá)式和使用方法，唯一不同的是這種指定了元素的類型而以。同樣在IE6-8和FF3.0-瀏覽器不支持這種選擇器

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

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

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

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

8、:only-child和:only-of-type
":only-child"表示的是一個(gè)元素是它的父元素的唯一一個(gè)子元素。我們一起來看一個(gè)實(shí)例更好理解

css樣式

.demo .post p {background: lime;}
初步效果

如果我需要在div.post只有一個(gè)p元素的時(shí)候，改變這個(gè)p的樣式，那么我們現(xiàn)在就可以使用:only-child,如：
.demo .post p {background: lime;}
.demo .post p:only-child {background: red;}
此時(shí)只有div.post只有一個(gè)子元素p時(shí)，那么他的背景色將會改變,如圖所示：

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

如果我們想只選擇中上面中的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)容指的是一點(diǎn)內(nèi)容都沒有，哪怕是一個(gè)空格，比如說，你有三個(gè)段落，其中一個(gè)段落什么都沒有，完全是空的，你想這個(gè)p不顯示，那你就可這樣來寫：

p:empty {display: none;}
IE6-8瀏覽器不支持:empty選擇器

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

input:not([type="submit"]) {border: 1px solid red;}
否定選擇器 :not()，可以讓你定位不匹配該選擇器的元素。IE6-8瀏覽器不支持:not()選擇器

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

那么我們簡單了解一下他們的作用

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

p::first-line {font-weight:bold;}
::first-letter選擇文本塊的第一個(gè)字母，除非在同一行里面包含一些其它元素，不過這個(gè)主要運(yùn)用于段落排版上多，比如說首字下沉，

p::first-letter {font-size: 56px;float:left;margin-right:3px;}
::before和::after這兩個(gè)主要用來給元素的前面或后面插入內(nèi)容，這兩個(gè)常用"content"配合使用，見過最多的就是清除浮動，


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

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

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

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

最新評論