原文地址：http://www.w3cplus.com/css3/pseudo-class-selector

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

和前面一樣，在開(kāi)始之前先創(chuàng)建一個(gè)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>

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

.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的偽類(lèi)語(yǔ)法和別的語(yǔ)法有點(diǎn)不一樣，其主要有兩種語(yǔ)法表達(dá)方式

E:pseudo-class {property:value}/*其中E為元素;pseudo-class為偽類(lèi)名稱(chēng);property是css的屬性;value為css的屬性值*/

示例：

a:link {color:red;}

第二種寫(xiě)法

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

如：

a.selected:hover {color: blue;}

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

一、動(dòng)態(tài)偽類(lèi)

動(dòng)態(tài)偽類(lèi)，因?yàn)檫@些偽類(lèi)并不存在于HTML中,而只有當(dāng)用戶(hù)和網(wǎng)站交互的時(shí)候才能體現(xiàn)出來(lái)，動(dòng)態(tài)偽類(lèi)包含兩種，第一種是我們?cè)阪溄又谐？吹降腻^點(diǎn)偽 類(lèi)，如":link",":visited";另外一種被稱(chēng)作用戶(hù)行為偽類(lèi)，如“:hover”,":active"和":focus"。先來(lái)看最常見(jiàn)的 錨點(diǎn)偽類(lèi)

.demo a:link {color:gray;}/*鏈接沒(méi)有被訪(fǎng)問(wèn)時(shí)前景色為灰色*/.demo a:visited{color:yellow;}/*鏈接被訪(fǎng)問(wèn)過(guò)后前景色為黃色*/.demo a:hover{color:green;}/*鼠標(biāo)懸浮在鏈接上時(shí)前景色為綠色*/.demo a:active{color:blue;}/*鼠標(biāo)點(diǎn)中激活鏈接那一下前景色為藍(lán)色*/

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

:hover用于當(dāng)用戶(hù)把鼠標(biāo)移動(dòng)到元素上面時(shí)的效果；

:active用于用戶(hù)點(diǎn)擊元素那一下的效果（正發(fā)生在點(diǎn)的那一下，松開(kāi)鼠標(biāo)左鍵此動(dòng)作也就完成了）

:focus用于元素成為焦點(diǎn)，這個(gè)經(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;}

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

對(duì)于:hover在IE6下只有a元素支持，:active只有IE7-6不支持，:focus在IE6-7下不被支持。

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

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

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

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

三、CSS3的:nth選擇器

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

:first-child選擇某個(gè)元素的第一個(gè)子元素；

:last-child選擇某個(gè)元素的最后一個(gè)子元素；

:nth-child()選擇某個(gè)元素的一個(gè)或多個(gè)特定的子元素；

:nth-last-child()選擇某個(gè)元素的一個(gè)或多個(gè)特定的子元素，從這個(gè)元素的最后一個(gè)子元素開(kāi)始算；

:nth-of-type()選擇指定的元素；

:nth-last-of-type()選擇指定的元素，從元素的最后一個(gè)開(kāi)始計(jì)算；

:first-of-type選擇一個(gè)上級(jí)元素下的第一個(gè)同類(lèi)子元素；

:last-of-type選擇一個(gè)上級(jí)元素的最后一個(gè)同類(lèi)子元素；

:only-child選擇的元素是它的父元素的唯一一個(gè)了元素；

:only-of-type選擇一個(gè)元素是它的上級(jí)元素的唯一一個(gè)相同類(lèi)型的子元素；

:empty選擇的元素里面沒(méi)有任何內(nèi)容。

下面我們針對(duì)上面所列的各種選擇器，一個(gè)一個(gè)來(lái)介紹：

1、:first-child

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

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

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

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

其實(shí)這兩種最終效果是一樣的，只是后面這種，我們需要在html增加一個(gè)額外的class名，請(qǐng)看效果：

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

2、:last-child

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

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

這個(gè)效果和以前在列表上的“l(fā)ast”的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開(kāi)始計(jì)算*/:nth-child(n*length)/*n的倍數(shù)選擇，n從0開(kāi)始算*/:nth-child(n+length);/*選擇大于length后面的元素*/:nth-child(-n+length)/*選擇小于length前面的元素*/:nth-child(n*length+1);/*表示隔幾選一*///上面length為整數(shù)

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

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

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

效果如下所示：

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

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

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

他其實(shí)是這樣計(jì)算的

n=0 －－》 沒(méi)有選擇元素n=1 －－》 選擇第一個(gè)li,n=2 －－》 選擇第二個(gè)li,后在的依此類(lèi)推，這樣下來(lái)就選中了所有的li

請(qǐng)看效果：

請(qǐng)注意了，這里的“n”只能是"n"，不能使用其他字母代替，不然會(huì)沒(méi)有任何效果的。

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

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

我們來(lái)看一下其計(jì)算的過(guò)程：

n=0 －－》 2n=0 －－》 沒(méi)有選中任何元素，n=1 －－》 2n=2 －－》 選擇了第二個(gè)lin=2 －－》 2n＝4 －－》 選擇了第四個(gè)li，后面的依此類(lèi)推

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

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

:nth-child(2n-1),這個(gè)選擇器是在":nth-child(2n)"基礎(chǔ)上演變過(guò)來(lái)的，上面說(shuō)了人是選擇偶數(shù)，那么我們?cè)谒幕A(chǔ)上減去“1”就變成奇數(shù)選擇，如：

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

我們來(lái)看看其實(shí)現(xiàn)過(guò)程

n=0 －－》 2n-1=-1 －－》 也沒(méi)有選中任何元素，n=1 －－》 2n-1=1 －－》 選擇第一個(gè)lin=2 －－》 2n-1=3 －－》 選擇第三個(gè)li,后面的依此類(lèi)推

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

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

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

按前面的計(jì)算方法，我們來(lái)看看，

n=0 －－》 n+5=5 －－》 選中第5個(gè)lin=1 －－》 n+5=6 －－》 選擇第6個(gè)li，后面的就不列出來(lái)了，原理一樣

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

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

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

如果不清楚怎么一回事，你只要計(jì)算一下就明白了

n=0 －－》 -n+5=5 －－》 選擇了第5個(gè)lin=1 －－》 -n+5=4 －－》 選擇了第4個(gè)lin=2 －－》 -n+5=3 －－》 選擇了第3個(gè)lin=3 －－》 -n+5=2 －－》 選擇了第2個(gè)lin=4 －－》 -n+5=1 －－》 選擇了第1個(gè)lin=5 －－》 -n+5=0 －－》 沒(méi)有選擇任何元素

從上面的計(jì)算方法中，大家很清楚的知道是怎么得來(lái)的，最后我們一起看看效果吧：

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

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

我們主要來(lái)看其計(jì)算出來(lái)的結(jié)果

n=0 －－》4n+1=1 －－》選擇了第一個(gè)lin=1 －－》4n+1=5 －－》選擇了第五個(gè)lin=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è)元素開(kāi)始算，來(lái)選擇特定元素。我們來(lái)看幾個(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á)式來(lái)選擇特定元素，下面我們來(lái)看幾個(gè)特殊的表達(dá)式所起的作用

:nth-last-child(2n),這個(gè)表示的是從元素后面計(jì)算，選擇的是偶數(shù)個(gè)數(shù)，從而反過(guò)來(lái)說(shuō)就是選擇元素的奇數(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;}

請(qǐng)看效果：

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

.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()"使用方法是一樣的，只不過(guò)他們的區(qū)別是“:nth-child()”是從元素的第一個(gè)開(kāi)始計(jì)算，而“:nth-last-child()”是從元素的最后一個(gè)開(kāi)始計(jì)算，他們的計(jì)算方法都是一樣的。同樣在IE6-8和FF3.0-瀏覽器不支持“:nth-last-child()”選擇器。

5、:nth-of-type

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

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

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

6、:nth-last-of-type

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

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

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

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

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

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

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

<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只有一個(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í)，那么他的背景色將會(huì)改變,如圖所示：

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

<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元素，我們就可以這樣寫(xiě)，

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

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

9、:empty

:empty是用來(lái)選擇沒(méi)有任何內(nèi)容的元素，這里沒(méi)有內(nèi)容指的是一點(diǎn)內(nèi)容都沒(méi)有，哪怕是一個(gè)空格，比如說(shuō)，你有三個(gè)段落，其中一個(gè)段落什么都沒(méi)有，完全是空的，你想這個(gè)p不顯示，那你就可這樣來(lái)寫(xiě)：

p:empty {display: none;}

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

三、否定選擇器（:not）

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

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

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

四、偽元素

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

那么我們簡(jiǎn)單了解一下他們的作用

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

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

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

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

::before和::after這兩個(gè)主要用來(lái)給元素的前面或后面插入內(nèi)容，這兩個(gè)常用"content"配合使用，見(jiàn)過(guò)最多的就是清除浮動(dòng)，

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

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

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

那么有關(guān)于CSS3的選擇器到這里就全部介紹完了，如果你對(duì)這個(gè)東西感興趣，你可以點(diǎn)擊這里了解更多的知識(shí)。如果你全部看完了這三章關(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ò)的。哈。。。。

總結(jié)

以上是生活随笔為你收集整理的【转】伪类选择器的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。