希望的燈一旦熄滅，生活剎那間變成了一片黑暗。——普列姆昌德

目錄

• • 基礎(chǔ)選擇器
  • • ID選擇器
    • 元素選擇器
    • 類(lèi)選擇器
    • 屬性選擇器
    • 偽類(lèi)選擇器
    • 偽元素選擇器
  • 組合選擇器
  • • 后代選擇器
    • 子代選擇器
    • 相鄰兄弟選擇器
    • 兄弟選擇器
    • 并列選擇器
  • CSS層疊
  • • 解決過(guò)程
    • • 一. 比較重要性
      • 二. 比價(jià)特殊性
      • 三. 比較源次序

在網(wǎng)頁(yè)開(kāi)發(fā)中我們經(jīng)常需要對(duì)頁(yè)面中的元素進(jìn)行操作（比如：給字體加色、來(lái)個(gè)鼠標(biāo)懸浮特效等）這時(shí)候我們就需要通過(guò)選擇器來(lái)精確定位到指定元素給其添加對(duì)應(yīng)的樣式，本章內(nèi)容主要介紹下常見(jiàn)選擇器

基礎(chǔ)選擇器

ID選擇器

通過(guò)#id值定位元素，全局中的id值是唯一的

<div id="demo">id選擇器<div> /* id為demo的元素，字體顏色設(shè)置為紅色 */ #demo {color: red; }

元素選擇器

通過(guò)元素類(lèi)型名稱(chēng)定位元素

<p>元素選擇器</p> <p>元素選擇器</p> <p>元素選擇器</p> /* p元素，字體顏色設(shè)置為紅色 */ p {color: red; }

類(lèi)選擇器

通過(guò).class值定位元素，可以設(shè)置多個(gè)

<div class="demo">類(lèi)選擇器</demo> <div class="demo">類(lèi)選擇器</demo> <div class="demo">類(lèi)選擇器</demo> /* 類(lèi)名為demo的元素，字體顏色設(shè)置為紅色 */ .demo {color: red; }

屬性選擇器

通過(guò)[屬性名=屬性值]來(lái)定位元素

屬性說(shuō)明

[attr]	選中帶有attr屬性的元素
[attr=value]	選中帶有attr屬性，且屬性值為value的元素
[attr^=value]	選中帶有attr屬性，且屬性值為以value開(kāi)頭的元素
[attr$=value]	選中帶有attr屬性，且屬性值為以value結(jié)尾的元素
[attr*=value]	選中帶有attr屬性，且屬性值為包含value的元素
[attr~=value]	選中帶有attr屬性，且屬性值為包含value的元素（value左右必須用空格隔開(kāi)）
[attr|=value]	選中帶有attr屬性，且屬性值為為value或value-開(kāi)頭的元素

<a href="">百度1</a> <a href="https://www.baidu.com">百度2</a> <a href="www.baidu.com">百度3</a> <a href="www.baidu.cn">百度4</a> <a href="www.sina.com.cn">新浪1</a> <a href="www. sina .com.cn">新浪2</a> <a href="sina-www..com.cn">新浪3</a> /* 帶有href屬性的元素，字體顏色設(shè)置為紅色 */ [href] {color: red; } /* 帶有href屬性，且屬性值為https://www.baidu.com元素，字體顏色設(shè)置為綠色 */ [href="https://www.baidu.com"] {color: green; } /* 帶有href屬性，且屬性值以www開(kāi)頭的元素，字體顏色設(shè)置為粉色 */ [href^="www"] {color: pink; } /* 帶有href屬性，且屬性值以.cn結(jié)尾的元素，字體顏色設(shè)置為紫色 */ [href$=".cn"] {color: purple; } /* 帶有href屬性，且屬性值包含sina的元素，字體顏色設(shè)置為棕色 */ [href*="sina"] {color: brown; } /* 帶有href屬性，且屬性值包含sina的元素（必須以單獨(dú)一個(gè)詞顯示），字體顏色設(shè)置為天藍(lán)色 */ [href~="sina"] {color: skyblue; } /* 帶有href屬性，且屬性值以sina-開(kāi)頭的元素，字體顏色設(shè)置為橙色 */ [href|="sina"] {color: orange; }

偽類(lèi)選擇器

通常表示元素的某種狀態(tài)

<p>鼠標(biāo)懸浮狀態(tài)</p> /* 鼠標(biāo)懸浮狀態(tài)下的p元素，字體顏色設(shè)置為紅色 */ p:hover {color: red; }

偽元素選擇器

偽元素：元素末額外添加的元素，偽元素選擇器就是用于獲取到這個(gè)額外元素

<p><span>JavaScript權(quán)威指南</span>是每一個(gè)前端開(kāi)發(fā)人員必讀書(shū)本</p> /* 選擇after，before兩個(gè)偽元素，將其內(nèi)容設(shè)置為書(shū)名號(hào)，同時(shí)設(shè)置偽元素字體顏色為紅色 */ span:before {content: "《";color: red; } span:after {content: "》";color: red; }

組合選擇器

由兩個(gè)或兩個(gè)以上選擇器所組成的選擇器

后代元素：父元素下所有的元素，都是后代元素

子元素：最接近父元素的后代元素

后代選擇器

通過(guò) element A 空格 element B 定位到A元素的后代元素B

<!-- 以最外層div為父元素 --> <div><p>兒子</p> <!-- 1 --> 后代元素、子元素<main> <!-- 1 --> 后代元素、子元素<p>孫子</p> <!-- 2 --> 后代元素<section> <!-- 2 --> 后代元素<p>重孫</p> <!-- 3 --> 后代元素</section></main> </div> 、/* 選中div元素下所有的p元素，字體顏色設(shè)置為紅色 */ div p {color: red; }

子代選擇器

通過(guò) element A > element B 來(lái)定位A元素的子代元素B

<div><p>兒子</p> <!-- 1 --><main> <!-- 1 --><p>孫子</p> <!-- 2 --><section> <!-- 2 --><p>重孫</p> <!-- 3 --></section></main> </div> 、/* 選中div元素下子元素p元素（子元素：標(biāo)記1的元素），字體顏色設(shè)置為紅色 */ div > p {color: red }

相鄰兄弟選擇器

通過(guò) element A + element B 定位A元素的下一個(gè)兄弟元素B

<div>當(dāng)前元素</div> <p>第一個(gè)兄弟元素</p> <p>第二個(gè)兄弟元素</p> <p>第三個(gè)兄弟元素</p> /* 選中div元素的下一個(gè)兄弟元素，并且是p元素，字體顏色設(shè)置為紅色 */ div + p {color: red; }

兄弟選擇器

通過(guò) element A ~ element B 定位A元素后面的所有兄弟元素B

<p>上一個(gè)兄弟元素</p> <div>當(dāng)前元素</div> <p>第一個(gè)兄弟元素</p> <p>第二個(gè)兄弟元素</p> <p>第三個(gè)兄弟元素</p> /* 選中div元素后面所有的p元素，字體顏色設(shè)置為紅色 */ div ~ p {color: red; }

并列選擇器

通過(guò)element A ， element B，elementC 來(lái)定位多個(gè)元素

<p>A</p> <div>B</div> <span>C</span> /* 選中p、div、span元素，將字體顏色設(shè)置為紅色 */ p, div, span {color: red; }

CSS層疊

聲明沖突：同一樣式，多次作用與同一樣式

層疊（權(quán)重計(jì)算）：解決聲明沖突的過(guò)程（瀏覽器自動(dòng)處理）

解決過(guò)程

只有上一級(jí)比較無(wú)法確定時(shí)，才會(huì)去下一級(jí)比較

一. 比較重要性

重要性從高到低依次遞減

作者樣式表：開(kāi)發(fā)者寫(xiě)的樣式代碼

1）作者樣式表中的!important樣式
2）作者樣式表中的普通樣式
3）瀏覽器的默認(rèn)樣式

二. 比價(jià)特殊性

主要針對(duì)選擇器

總體規(guī)則：選擇器的范圍約窄，越特殊

具體規(guī)則：通過(guò)選擇器，計(jì)算一個(gè)4位數(shù)權(quán)重值（xxxx）

1）千位：如果內(nèi)聯(lián)樣式記1；否則記0
2）百位：等于選擇器中ID選擇器的數(shù)量
3）十位：等于選擇器中類(lèi)選擇器、偽類(lèi)選擇器、屬性選擇器的數(shù)量
4）個(gè)位：等于選擇器中偽元素選擇器、元素選擇器的數(shù)量

三. 比較源次序

后面的代碼覆蓋前面的代碼

總結(jié)

以上是生活随笔為你收集整理的小和尚学习-CSS选择器的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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