溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章給大家介紹有哪些css高級(jí)選擇器，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。
CSS選擇器：就是指定CSS要作用的標(biāo)簽，那個(gè)標(biāo)簽的名稱就是選擇器。意為：選擇哪個(gè)容器。
CSS的選擇器分為兩大類：基本選擇題和擴(kuò)展選擇器。
基本選擇器：
標(biāo)簽選擇器：針對(duì)一類標(biāo)簽
ID選擇器：針對(duì)某一個(gè)特定的標(biāo)簽使用
類選擇器：針對(duì)你想要的所有標(biāo)簽使用
通用選擇器（通配符）：針對(duì)所有的標(biāo)簽都適用（不建議使用）
高級(jí)選擇器：
后代選擇器：用空格隔開(kāi)
交集選擇器：用.隔開(kāi)
并集選擇器（分組選擇器）：用逗號(hào)隔開(kāi)
偽類選擇器
屬性選擇器
對(duì)于E F這種格式，表示所有屬于E元素后代的F元素，有這個(gè)樣式?？崭窬捅硎竞蟠?。
后代選擇器，就是一種平衡：共性、特性的平衡。當(dāng)要把某一個(gè)部分的所有的什么，進(jìn)行樣式改變，就要想到后代選擇器。
后代選擇器，描述的是祖先結(jié)構(gòu)。
看定義可能有點(diǎn)難理解，我們來(lái)看例子吧。
舉例1：
<style type="text/css">
.div1 p{
color:red;
}
</style>空格就表示后代。.p1 p 表示.p1的后代所有的p。
這里強(qiáng)調(diào)一下：這兩個(gè)標(biāo)簽不一定是連續(xù)緊挨著的，只要保持一個(gè)后代的關(guān)聯(lián)即可。也就是說(shuō)，選擇的是后代，不一定是兒子。
舉例：
<style type="text/css">
h4 b i{
color:red ;
}
</style上方代碼的意思是說(shuō)：定義了<h4>標(biāo)簽中的<b>標(biāo)簽中的<i>標(biāo)簽的樣式。
同理：h4和b和i標(biāo)簽不一定是連續(xù)緊挨著的，只要保持一個(gè)后代的關(guān)聯(lián)即可。
效果：
或者還有下面這種寫法：
上面的這種寫法，<h4>標(biāo)簽和<i>標(biāo)簽并不是緊挨著的，但他們保持著一種后代關(guān)系。
還有下面這種寫法：（含類選擇器、id選擇器都是可以的）
我們?cè)陂_(kāi)頭說(shuō)了：后代選擇器，描述的是一種祖先結(jié)構(gòu)。我們舉個(gè)例子來(lái)說(shuō)明這句話：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div div p{
color: red;
}
.div2{...}
.div3{...}
.div4{...}
</style>
</head>
<body>
<div>
<div>
<div>
<div>
<p>我是什么顏色？</p>
</div>
</div>
</div>
</div>
</body>
</html>上面css中的p p p，也能使文字的顏色變紅。通過(guò)瀏覽器的審查元素，我們可以看到 p元素的祖先列表：
講到這里，我們?cè)偬嵋粋€(gè)sublime的快捷鍵。
在sublime中輸入p#haha，按tab鍵后，會(huì)生成<p id="haha"></p>。
在sublime中輸入p.haha，按tab鍵后，會(huì)生成<p class="haha"></p>。
來(lái)看下面這張圖就明白了：
<style type="text/css">
h4.special{
color:red;
}
</style>選擇的元素要求同時(shí)滿足兩個(gè)條件：必須是h4標(biāo)簽，然后必須是special標(biāo)簽。
只能在h4標(biāo)簽中使用它：
<h4 class="special">css</h4>
注意，交集選擇器沒(méi)有空格。所以，沒(méi)有空格的p.red（交集選擇器）和有空格的p .red（后代選擇器）不是一個(gè)意思。
交集選擇器可以連續(xù)交：（一般不要這么寫）
h4.special.zhongyao{
color:red;
}上面這種寫法，是 IE7 開(kāi)始兼容的，IE6 不兼容。
交集選擇器，我們一般都是以標(biāo)簽名開(kāi)頭，比如p.haha 比如p.special。
三種基本選擇器都可以放進(jìn)來(lái)。
舉例：
p,h2,#mytitle,.one/*定義了一個(gè)并集選擇器，帶有p,h2,id="mytitle",class="one"的標(biāo)簽都內(nèi)容會(huì)顯示紅色*/{
color:red;
}
對(duì)于<a>標(biāo)簽，其對(duì)應(yīng)幾種不同的狀態(tài)：
link：超鏈接點(diǎn)擊之前
visited：超鏈接點(diǎn)擊之后
focus：是某個(gè)標(biāo)簽獲得焦點(diǎn)的時(shí)候（比如某個(gè)輸入框獲得焦點(diǎn)）
hover：鼠標(biāo)放到某個(gè)標(biāo)簽上的時(shí)候
active：點(diǎn)擊某個(gè)標(biāo)簽沒(méi)有松鼠標(biāo)時(shí)
CSS允許對(duì)于元素的不同狀態(tài)，定義不同的樣式信息。偽類選擇器又分為兩種：
靜態(tài)偽類：只能用于超鏈接
動(dòng)態(tài)偽類：針對(duì)所有標(biāo)簽都適用
下面來(lái)分別講一下這兩種偽類選擇器。
（1）靜態(tài)偽類：
用于以下兩個(gè)狀態(tài)（只能使用于超鏈接）：
link：超鏈接點(diǎn)擊之前
visited：超鏈接點(diǎn)擊之后
舉個(gè)例子：
<style type="text/css">/*偽類選擇器：靜態(tài)偽類 */
a:link /*(針對(duì)所有利用href屬性的)超鏈接(不包括錨點(diǎn))點(diǎn)擊之前是紅色*/{
color:red; } a:visited/*讓超鏈接點(diǎn)擊之后是綠色*/{ color:green; } </style>
問(wèn)：既然a{}定義了超鏈接的屬性，a:link{}定義了超鏈接點(diǎn)擊之前的屬性，那這兩個(gè)有啥區(qū)別呢？
答：
a{}和a:link{}的區(qū)別：
a{}定義的樣式針對(duì)所有的超鏈接(包括錨點(diǎn))
a:link{}定義的樣式針對(duì)所有寫了href屬性的超鏈接(不包括錨點(diǎn))
（2）動(dòng)態(tài)偽類:
用于以下幾種狀態(tài)（適用于所有的標(biāo)簽）：
focus（聚焦，點(diǎn)擊某個(gè)文本框后輸入文字，可以定義文本框和文字的屬性）：是某個(gè)標(biāo)簽獲得焦點(diǎn)的時(shí)候（比如某個(gè)輸入框獲得焦點(diǎn)）
hover（盤旋，鼠標(biāo)停留在上面）：鼠標(biāo)放到某個(gè)標(biāo)簽上的時(shí)候
active（長(zhǎng)按狀態(tài)）：點(diǎn)擊某個(gè)標(biāo)簽沒(méi)有松鼠標(biāo)時(shí)
舉個(gè)例子：
<head>
<style type="text/css">
/* 偽類選擇器：動(dòng)態(tài)偽類*/
input:focus/*讓input文本框獲取焦點(diǎn)時(shí)：邊框：#FF6F3D這種橙色；文字：綠色；背景色：#6a6a6a這種灰色*/{
border:3px solid #FF6F3D;
color:white;
background-color:#6a6a6a;
}
label:hover/*鼠標(biāo)放在label標(biāo)簽上時(shí)顯示藍(lán)色*/{
color:blue;
}
label:active/*點(diǎn)擊label標(biāo)簽鼠標(biāo)沒(méi)有松開(kāi)時(shí)顯示紅色*/{
color:red;
}
</style>
</head>
<body>
<input type="text" name=""><br><br>
<label>css大神</label>
</body>利用這個(gè)hover屬性，我們同樣對(duì)表格做一個(gè)樣式的設(shè)置：
表格舉例：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus?">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
/*整個(gè)表格的樣式*/
table{
width: 300px;
height: 200px;
border: 1px solid blue;
/*border-collapse屬性：對(duì)表格的線進(jìn)行折疊*/
border-collapse: collapse;
}
/*鼠標(biāo)懸停時(shí)，讓當(dāng)前行顯示#868686這種灰色*/
table tr:hover{
background: #868686;
}
/*每個(gè)單元格的樣式*/
table td{
border:1px solid red;
}
</style>
</head>
<body>
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>效果如下：
另外，介紹一下子代選擇器：用符號(hào)>表示
IE7開(kāi)始兼容，IE6不兼容:
div>p{
color:red;
}p的兒子p。和p的后代p的截然不同。
能夠選擇：
<div> <p>我是div的兒子</p> </div>
不能選擇：
<div> <ul> <li> <p>我是div的重孫子</p> </li> </ul> </div>
IE8開(kāi)始兼容；IE6、7都不兼容
設(shè)置無(wú)序列表<ul>中的第一個(gè)<li>為紅色：
<style type="text/css">
ul li:first-child{
color:red;
}
</style>設(shè)置無(wú)序列表<ul>中的最后一個(gè)<li>為紅色：
ul li:last-child{
color:blue;
}序選擇器還有更復(fù)雜的用法。
由于瀏覽器的更新需要過(guò)程，所以現(xiàn)在如果公司還要求兼容IE6、7，那么就要自己寫類名：
<ul> <li class="first">項(xiàng)目</li> <li>項(xiàng)目</li> <li>項(xiàng)目</li> <li>項(xiàng)目</li> <li>項(xiàng)目</li> <li>項(xiàng)目</li> <li>項(xiàng)目</li> <li>項(xiàng)目</li> <li>項(xiàng)目</li> <li class="last">項(xiàng)目</li> </ul>
用類選擇器來(lái)選擇第一個(gè)或者最后一個(gè)：
ul li.first{
color:red;
}
ul li.last{
color:blue;
}IE7開(kāi)始兼容，IE6不兼容。
+表示選擇下一個(gè)兄弟
<style type="text/css">
h4+p{
color:red;
}
</style>上方的選擇器意思是：選擇的是h4元素后面緊挨著的第一個(gè)兄弟。
<h4>我是一個(gè)標(biāo)題</h4> <p>我是一個(gè)段落</p> <p>我是一個(gè)段落</p> <p>我是一個(gè)段落</p> <h4>我是一個(gè)標(biāo)題</h4> <p>我是一個(gè)段落</p> <p>我是一個(gè)段落</p> <p>我是一個(gè)段落</p> <h4>我是一個(gè)標(biāo)題</h4> <p>我是一個(gè)段落</p> <p>我是一個(gè)段落</p> <p>我是一個(gè)段落</p> <h4>我是一個(gè)標(biāo)題</h4>
效果如下：
這種選擇器作用不大。
好處：將id屬性和class屬性選擇器結(jié)合
格式有兩種分別是：
標(biāo)簽元素名[屬性名]{}
標(biāo)簽元素名[屬性名=屬性值] 注意：class*=""為*=并且?guī)б?hào)
屬性選擇器中常用的幾個(gè)正則表達(dá)式通配符：
=絕對(duì)等于唯一（適合id）
*=包含（適合class）
^=以這個(gè)元素開(kāi)頭
$=以這個(gè)元素結(jié)尾
舉例圖：
學(xué)習(xí)視頻分享：css視頻教程
以上就是css高級(jí)選擇器有哪些的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注億速云其它相關(guān)文章！
css的選擇器可以分為三大類，即id選擇器、class選擇器、標(biāo)簽選擇器。它們之間可以有多種組合，有后代選擇器、子選擇器、偽類選擇器、通用選擇器、群組選擇器等等
關(guān)于有哪些css高級(jí)選擇器就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼