Vue進(jìn)階（幺捌陸）：CSS 屬性選擇器

導(dǎo)語(yǔ)

自CSS 2 引入了屬性選擇器，屬性選擇器可以根據(jù)元素的屬性及屬性值來(lái)選擇元素。

簡(jiǎn)單屬性選擇器

如果希望選擇有某個(gè)屬性的元素，而不論屬性值是什么，可以使用簡(jiǎn)單屬性選擇器。

下面的例子是把包含標(biāo)題（title）的所有元素變?yōu)樗{(lán)色：

[title] { color:blue; }

如果希望把包含標(biāo)題（title）的所有元素變?yōu)榧t色，可以寫作：

*[title] {color:red;}

與上面類似，可以只對(duì)有 href 屬性的錨（a 元素）應(yīng)用樣式：

a[href] {color:red;}

此外，還可以根據(jù)多個(gè)屬性進(jìn)行選擇，只需將屬性選擇器鏈接在一起即可。

例如，為了將同時(shí)有 href 和 title 屬性的 HTML 超鏈接的文本設(shè)置為紅色，可以這樣寫：

a[href][title] {color:red;}

屬性和值選擇器

除了選擇擁有某些屬性的元素，還可以進(jìn)一步縮小選擇范圍，只選擇有特定屬性值的元素。

例如，假設(shè)希望將指向 Web 服務(wù)器上某個(gè)指定文檔的超鏈接變成紅色，可以這樣寫：

a[] {color: red;}

屬性和值的選擇器 - 多值

與簡(jiǎn)單屬性選擇器類似，可以把多個(gè)屬性-值選擇器鏈接在一起來(lái)選擇一個(gè)文檔。

a[] {color: red;}

這會(huì)把以下標(biāo)記中的第一個(gè)超鏈接的文本變?yōu)榧t色，但是第二個(gè)或第三個(gè)鏈接不受影響：

W3School CSS HTML

屬性與屬性值必須完全匹配

請(qǐng)注意，這種格式要求必須與屬性值完全匹配。

如果屬性值包含用空格分隔的值列表，匹配就可能出問題。

請(qǐng)考慮一下的標(biāo)記片段：

This paragraph is a very important warning.

如果寫成 p[class="important"]，那么這個(gè)規(guī)則不能匹配示例標(biāo)記。

要根據(jù)具體屬性值來(lái)選擇該元素，必須這樣寫：

p[class="important warning"] {color: red;}

根據(jù)部分屬性值選擇

如果需要根據(jù)屬性值中的詞列表的某個(gè)詞進(jìn)行選擇，則需要使用波浪號(hào)（~）。

假設(shè)您想選擇 class 屬性中包含 important 的元素，可以用下面這個(gè)選擇器做到這一點(diǎn)：

p[class~="important"] {color: red;}

如果忽略了波浪號(hào)，則說(shuō)明需要完成完全值匹配。

部分值屬性選擇器與點(diǎn)號(hào)類名記法的區(qū)別

該選擇器等價(jià)于我們?cè)陬愡x擇器中討論過的點(diǎn)號(hào)類名記法。

也就是說(shuō)，p.important 和 p[class="important"] 應(yīng)用到 HTML 文檔時(shí)是等價(jià)的。

那么，為什么還要有 “~=” 屬性選擇器呢？因?yàn)樗苡糜谌魏螌傩裕恢皇?class。

例如，存在一個(gè)包含大量圖像的文檔，其中只有一部分是圖片。對(duì)此，可以使用一個(gè)基于 title 文檔的部分屬性選擇器，只選擇這些圖片：

img[title~="Figure"] {border: 1px solid gray;}

這個(gè)規(guī)則會(huì)選擇 title 文本包含 “Figure” 的所有圖像。沒有 title 屬性或者 title 屬性中不包含 “Figure” 的圖像都不會(huì)匹配。

子串匹配屬性選擇器

以上為基本的屬性選擇器介紹，下面介紹一個(gè)更高級(jí)的選擇器模塊，它是 CSS2 完成之后發(fā)布的，其中包含了更多的部分值屬性選擇器。按照規(guī)范的說(shuō)法，應(yīng)該稱之為“子串匹配屬性選擇器”。

很多現(xiàn)代瀏覽器都支持這些選擇器，包括 IE7。

下表是對(duì)這些選擇器的簡(jiǎn)單總結(jié)：

可以想到，這些選擇有很多用途。

舉例來(lái)說(shuō)，如果希望對(duì)指向 https://shq5785.blog.csdn.net/所有鏈接應(yīng)用樣式，不必再為所有這些鏈接指定 class，而只需編寫以下規(guī)則：

a[href*="https://shq5785.blog.csdn.net/"] {color: red;}

特定屬性選擇類型

請(qǐng)看下面的例子：

*[lang|="en"] {color: red;}

上面的規(guī)則會(huì)選擇 lang 屬性等于 en 或以 en- 開頭的所有元素。因此，以下示例標(biāo)記中的前三個(gè)元素將被選中，而不會(huì)選擇后兩個(gè)元素：

Hello!

Greetings!

G'day!

Bonjour!

Jrooana!

一般來(lái)說(shuō)，[att|="val"] 可以用于任何屬性及其值。

假設(shè)一個(gè) HTML 文檔中有一系列圖片，其中每個(gè)圖片的文件名都形如 figure-1.jpg 和 figure-2.jpg。就可以使用以下選擇器匹配所有這些圖像：

img[src|="figure"] {border: 1px solid gray;}

表單樣式

屬性選擇器樣式無(wú)需使用class或id的形式:

input[type="text"] { width:150px; display:block; margin-bottom:10px; background-color:yellow; } input[type="button"] { width:120px; margin-left:35px; display:block; }

注1：IE7和IE8需聲明!DOCTYPE才支持屬性選擇器！IE6和更低的版本不支持屬性選擇器。

注2： 基本選擇器（標(biāo)簽、id、class）的優(yōu)先級(jí)

style > id選擇器 > class選擇器 > 標(biāo)簽選擇器

注3：

CSS HTML Vue

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請(qǐng)聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時(shí)內(nèi)刪除侵權(quán)內(nèi)容。

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請(qǐng)聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時(shí)內(nèi)刪除侵權(quán)內(nèi)容。