說到偽選擇器，真的讓我體會(huì)到了CSS的無比強(qiáng)大，強(qiáng)大到自己貌似都不認(rèn)識(shí)CSS了，有點(diǎn)C# 6.0中一些語法糖帶給我們的震撼。。。首先

我們可以在VS里面提前預(yù)覽一下。

可以看到，上面的偽類有很多很多，多的讓我眼都快瞎了。。。下面就挑一些實(shí)用性比較強(qiáng)的說一說。

一? :nth-child 偽選擇器

我們知道在jquery中有一種選擇器叫做“子類選擇器”，對應(yīng)的有:nth-child，:first-child，:last-child，:only-child，這回在CSS中同樣

可以辦到，可以說一定程度上緩解了jquery的壓力，下面簡單舉個(gè)例子。

復(fù)制代碼代碼如下:

ul li:nth-child(1) {

color: red;

}

• 1
• 2
• 3
• 4
• 5
• 6

可以看到，當(dāng)我灌的是:nth-child(1)的時(shí)候，ul的第一個(gè)li的color已經(jīng)變成red了，如果復(fù)雜一點(diǎn)的話，可以將1改成n，瀏覽器在解析css的偽類

選擇器的時(shí)候，內(nèi)部應(yīng)該會(huì)調(diào)用相應(yīng)的方法來解析到對應(yīng)dom的節(jié)點(diǎn)，首先要明白n是從0，步長為1的遞增，這個(gè)和jquery的nth-child類似，沒

什么好說的，然后我們嘗試下：first-child 和 last-child。

復(fù)制代碼代碼如下:

ul li:first-child {

color: red;

font-weight:800;

}

ul li:last-child {

color: blue;

font-weight: 800;

}

• 1
• 2
• 3
• 4
• 5
• 6

二 :checked，:unchecked,:disabled,:enabled

同樣在jquery中，有一組選擇器叫做“表單對象屬性“，我們可以看看jquery的在線文檔。

同樣我們很開心的發(fā)現(xiàn)，在css中也存在這些屬性。。。是不是開始有點(diǎn)醉了。。。還是先睹為快。

1. disabled,enabled

復(fù)制代碼代碼如下:

input[type='text']:enabled {

border: 1px solid red;

}

input[type='text']:disabled {

border: 1px solid blue;

}

2.? checked,unchecked

復(fù)制代碼代碼如下:

form input[type="radio"]:first-child:checked {

margin-left: 205px;

}

女

男

3. selected

這個(gè)在css中雖然沒有原裝的，但是可以用option:checked來替代，比如下面這樣。

復(fù)制代碼代碼如下:

option:checked {

color: red;

}

1

2

3

三? empty偽選擇器

這個(gè)選擇器有點(diǎn)意思，在jquery中叫做”內(nèi)容選擇器“，就是用來尋找空元素的，如果玩轉(zhuǎn)jquery的empty，這個(gè)也沒有什么問題，

下面舉個(gè)例子，讓第一個(gè)空p的背景變色。

復(fù)制代碼代碼如下:

p:first-child{

width:500px;

height:20px;

}

p:empty {

background:red;

}

他好

四：not(xxx) 偽選擇器

同樣這個(gè)也是非常經(jīng)典的not選擇器，在jquery中叫做”基本選擇器“，想起來了沒有？？？

總的來說，當(dāng)你看完上面這些，是不是覺得css3中已經(jīng)融入了一些”腳本處理行為”，這種感覺就是那個(gè)css再也不是你曾今認(rèn)識(shí)的那個(gè)css了。

總結(jié)

以上是生活随笔為你收集整理的css unchecked,详细介绍CSS中的伪选择器的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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