圖片來源于網(wǎng)絡(luò) 侵刪

最詳細的css3選擇器解析

圖片來源于網(wǎng)絡(luò) 侵刪

選擇器是什么？

比較官方的解釋：在 CSS 中，選擇器是一種模式，用于選擇需要添加樣式的元素。

最常見的 CSS 選擇器是元素選擇器。換句話說，文檔的元素就是最基本的選擇器。

看代碼，元素選擇器就是這個：

圖片來源于網(wǎng)絡(luò) 侵刪

h1作為一個元素標(biāo)簽，是最基本的選擇器，這樣可以對h1標(biāo)簽設(shè)置屬性。

選擇器有哪些？

常見的選擇器：元素選擇器，類選擇器，ID選擇器，屬性選擇器，派生選擇器，

本文的思路就是先講講最常用的選擇器，再講講用得比較少的選擇器。如果你覺得能學(xué)到不少知識，點個關(guān)注哦，精彩美文第一時間為你奉上。

圖片來源于網(wǎng)絡(luò) 侵刪

圖片來源于網(wǎng)絡(luò) 侵刪

選擇器-元素選擇器

元素選擇器，最常用的選擇器之一，常用于html標(biāo)簽，p標(biāo)簽，h1-h6標(biāo)簽等的樣式設(shè)定。具體怎么用就不詳細介紹了，上面開頭已經(jīng)舉例說明了。

在 W3C 標(biāo)準(zhǔn)中，元素選擇器又稱為類型選擇器（type selector）。

“類型選擇器匹配文檔語言元素類型的名稱。類型選擇器匹配文檔樹中該元素類型的每一個實例?！?/p>

選擇器-類選擇器

類選擇器與元素選擇器看起來很類似，但是還是有一些區(qū)別。類選擇器允許以一種獨立于文檔元素的方式來指定樣式。該選擇器可以單獨使用，也可以與其他元素結(jié)合使用。

提示：只有適當(dāng)?shù)貥?biāo)記文檔后才能使用這些選擇器，所以使用這種選擇器通常需要先做一些構(gòu)想和計劃。要應(yīng)用樣式而不考慮具體設(shè)計的元素，最常用的方法就是使用類選擇器。

類選擇器怎么用，如下圖：

圖片來源于網(wǎng)絡(luò) 侵刪

圖中的body標(biāo)簽里面，有一個div，div有一個class屬性，這就是所謂的類，但是這個類不同于java語言的類。然后我們需要對這個div設(shè)置一些樣式，看style里面，.select這個就是類選擇器了，類選擇器需要配合標(biāo)簽的class屬性一起使用。

類選擇器可以結(jié)合元素選擇器來使用。這種選擇器稱為結(jié)合元素選擇器。這里就將與類選擇器相關(guān)的選擇器詳細介紹一下。

例如：

圖片來源于網(wǎng)絡(luò) 侵刪

選擇器會匹配class屬性包含select的所有p標(biāo)簽，所以選擇器p.select解釋為：“其class屬性值為select的所有段落”。

還有一個多類選擇器。怎么用呢？看下面

圖片來源于網(wǎng)絡(luò) 侵刪

具體是什么意思呢？就是說：本來我的一個select的樣式是夠用的，但是突然加了需求，需要再加一個字體的大小，但是只想P標(biāo)簽使用，并且select又不是一個標(biāo)簽在使用，waring也不是只有一個P標(biāo)簽使用，這時候，多類選擇器就出現(xiàn)了，其實標(biāo)簽的style屬性也可以，但是不推薦這么干。使用多類選擇器之后，這個標(biāo)簽就同時結(jié)合了這兩個選擇器里面的樣式屬性。class里面的類的先后順序沒關(guān)系。

選擇器-ID選擇器

在某些方面，ID選擇器類似于類選擇器，但是也有一些重要的區(qū)別。

語法：類選擇器是在名稱前面加一個. ID選擇器在前面加上一個#

用法：類選擇器可以多次使用，ID選擇器只能使用在一個元素標(biāo)簽上面，并且只能使用一次，不能重復(fù)使用（在一個文檔里面），原因是在一個文檔里面，ID是唯一的。

示例：

圖片來源于網(wǎng)絡(luò) 侵刪

圖片來源于網(wǎng)絡(luò) 侵刪

這樣就為ID為test的標(biāo)簽h1設(shè)置了字體顏色屬性

注意事項：

1. ID選擇器在一個文檔中只能使用一次
2. 不能使用ID詞列表（意思是不能使用類選擇器那樣的結(jié)合，因為id屬性不允許有一空格分隔的詞列表）
3. 一般情況下ID選擇器與類選擇器都是區(qū)分大小寫的。

選擇器-屬性選擇器

屬性選擇器相對上面兩種選擇器來說用得比較少，也很簡單，來看看吧。

屬性選擇器可以根據(jù)元素的屬性以及屬性值來選擇元素。

• 簡單屬性選擇如果希望選擇有某個屬性的的元素，而不論屬性值是什么，可以使用簡單屬性選擇器如：

意思就是說將所有帶有href屬性的元素設(shè)置字體屬性為“微軟雅黑”

*{  font-size:12px;  }

這是通配符選擇器，css系列第一篇有說明！

示例中，*可以換成標(biāo)簽名，如

圖片來源于網(wǎng)絡(luò) 侵刪

意思是設(shè)置所有的name屬性的input標(biāo)簽的字體大小為20px。

• 根據(jù)具體屬性值選擇除了選擇擁有某些屬性的元素外，還可以選擇某些擁有特定屬性值的元素。示例

意思是選擇input標(biāo)簽中，name屬性為username的input標(biāo)簽，再為它設(shè)置樣式。

• 屬性與屬性值完全匹配

屬性與屬性值完全匹配與上面的根據(jù)具體值屬性有什么區(qū)別呢?還記得我們之前在類選擇器里面講解的多類選擇器吧。當(dāng)我們要選擇這類標(biāo)簽的時候，就需要屬性與屬性值完全匹配了，當(dāng)然這只是一個示例。

圖片來源于網(wǎng)絡(luò) 侵刪

這里面，如果我們用這個選擇器來代替是否可行？

圖片來源于網(wǎng)絡(luò) 侵刪

答案是不行的，這時候我們需要知道屬性與屬性值完全匹配了，看看下面

圖片來源于網(wǎng)絡(luò) 侵刪

這樣就可以精準(zhǔn)的找到這個p標(biāo)簽了，并且可以為他設(shè)置一些樣式，其實這樣看，你是不是覺得這個沒有什么用？其實這是有實際作用的，比如說在動態(tài)改變這個元素的樣式，是很方便的。

屬性選擇器這一塊還有一些需要了解的，但是不是很常用，這里就只解釋一下怎么個用法就行了。

選擇器描述[attribute]用于選取帶有指定屬性的元素。[attribute=value]用于選取帶有指定屬性和值的元素。[attribute~=value]用于選取屬性值中包含指定詞匯的元素。[attribute|=value]用于選取帶有以指定值開頭的屬性值的元素，該值必須是整個單詞。[attribute^=value]匹配屬性值以指定值開頭的每個元素。[attribute$=value]匹配屬性值以指定值結(jié)尾的每個元素。[attribute*=value]匹配屬性值中包含指定值的每個元素。

選擇器-后代選擇器

后代選擇器又稱為包含選擇器，后代選擇器可以選擇作為某元素后代的元素

• 根據(jù)上下文選擇元素

以上代碼的意思是選擇test里面的所有的p標(biāo)簽，然后將他們的背景顏色改成紅色。是不是很簡單，效率高。如果你一個一個的設(shè)置p標(biāo)簽也是可以的，但是效率太低了，人工效率哈。

選擇器-子元素選擇器

子元素選擇器與后代選擇器相比，子元素選擇器只能選擇作為元素子元素的元素

圖片來源于網(wǎng)絡(luò) 侵刪

這里的代碼，就只能將class為test里面的子元素h1的背景變成紅色，class為test2，以及class為test1里面的都不是class為test的子元素，這一點要注意。

• 結(jié)合后代選擇器和子選擇器后代選擇器還可以與子選擇器共同使用?這樣的效果是在h1下面的a標(biāo)簽的下劃線會被取消掉

選擇器-相鄰兄弟選擇器

如果需要選擇緊接在另一個元素后的元素，而二者有相同的元素，可以使用相鄰兄弟選擇器。

示例：

圖片來源于網(wǎng)絡(luò) 侵刪

這個選擇器讀作“選擇緊接在div1后面的h1標(biāo)簽，并且是一個”，這個選擇器也一樣，可以和前面的子元素選擇器一起使用。

偽類

css偽類是用于向某些選擇器添加特殊的效果。什么意思呢？看看代碼你就知道了。

圖片來源于網(wǎng)絡(luò) 侵刪

這段代碼是說當(dāng)鼠標(biāo)移動到p標(biāo)簽的時候，給p標(biāo)簽添加一些樣式。類似的還有很多。

a:link {color: #FF0000}/* 未訪問的鏈接 */a:visited {color: #00FF00}/* 已訪問的鏈接 */a:hover {color: #FF00FF}/* 鼠標(biāo)移動到鏈接上 */a:active {color: #0000FF}/* 選定的鏈接 */

具體的用法視情況而定。