溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
本篇內(nèi)容主要講解“CSS中的偽選擇器詳細(xì)介紹”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“CSS中的偽選擇器詳細(xì)介紹”吧!
說到偽選擇器，真的讓我體會(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è)例子。<head>
代碼如下:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title></p>
<p> <style type="text/css">
ul li:nth-child(1) {
color: red;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</body>
可以看到，當(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。
代碼如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title></p>
<p> <style type="text/css">
ul li:first-child {
color: red;
font-weight:800;
}</p>
<p> ul li:last-child {
color: blue;
font-weight: 800;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</body>
</html>
二 :checked，:unchecked,:disabled,:enabled
同樣在jquery中，有一組選擇器叫做“表單對象屬性“，我們可以看看jquery的在線文檔。
同樣我們很開心的發(fā)現(xiàn)，在css中也存在這些屬性。。。是不是開始有點(diǎn)醉了。。。還是先睹為快。
1. disabled,enabled
代碼如下:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title></p>
<p> <style type="text/css">
input[type='text']:enabled {
border: 1px solid red;
}</p>
<p> input[type='text']:disabled {
border: 1px solid blue;
}
</style></p>
<p></head>
<body>
<form>
<input type="text" disabled="disabled" />
<input type="text"/>
</form>
</body>
</html>
2. checked,unchecked
代碼如下:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title></p>
<p> <style type="text/css">
form input[type="radio"]:first-child:checked {
margin-left: 205px;
}
</style></p>
<p></head>
<body>
<form>
<input class="test" type="radio" value="女" /><span>女</span><br/>
<input class="test" type="radio" value="男" /><span>男</span></p>
<p> </form>
</body>
</html>
3. selected
這個(gè)在css中雖然沒有原裝的，但是可以用option:checked來替代，比如下面這樣。
代碼如下:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title></p>
<p> <style type="text/css">
option:checked {
color: red;
}
</style></p>
<p></head>
<body>
<form>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</form>
</body>
</html>
三 empty偽選擇器
這個(gè)選擇器有點(diǎn)意思，在jquery中叫做”內(nèi)容選擇器“，就是用來尋找空元素的，如果玩轉(zhuǎn)jquery的empty，這個(gè)也沒有什么問題，
下面舉個(gè)例子，讓第一個(gè)空p的背景變色。
代碼如下:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title></p>
<p> <style type="text/css"></p>
<p> p:first-child{
width:500px;
height:20px;
}</p>
<p> p:empty {
background:red;
}
</style></p>
<p></head>
<body>
<p></p>
<p>他好</p>
</body>
</html>
四：not(xxx) 偽選擇器
同樣這個(gè)也是非常經(jīng)典的not選擇器，在jquery中叫做”基本選擇器“，想起來了沒有？？？
總的來說，當(dāng)你看完上面這些，是不是覺得css3中已經(jīng)融入了一些”腳本處理行為”，這種感覺就是那個(gè)css再也不是你曾今認(rèn)識(shí)的那個(gè)css了。
到此，相信大家對“CSS中的偽選擇器詳細(xì)介紹”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼
