摘要：如果頁(yè)面上的鏈接很多或者對(duì)跳轉(zhuǎn)頁(yè)面的協(xié)議有要求，使用屬性選擇器配合偽元素對(duì)鏈接的協(xié)議進(jìn)行提示也不失為一種好方法。

CSS 屬性選擇器，可以通過(guò)已經(jīng)存在的屬性名或?qū)傩灾灯ヅ湓亍?/p>

屬性選擇器是在 CSS2 中引入的并且在 CSS3 中得到了很好拓展。本文將會(huì)比較全面的介紹屬性選擇器，盡可能的去挖掘這個(gè)選擇器在不同場(chǎng)景下的不同用法。

簡(jiǎn)單的語(yǔ)法介紹

[attr]：該選擇器選擇包含 attr 屬性的所有元素，不論 attr 的值為何。

[attr=val]：該選擇器僅選擇 attr 屬性被賦值為 val 的所有元素。

[attr~=val]：該選擇器僅選擇具有 attr 屬性的元素，而且要求 val 值是 attr 值包含的被空格分隔的取值列表里中的一個(gè)。

子串值（Substring value）屬性選擇器，

下面幾個(gè)屬于 CSS3 新增語(yǔ)法，也被稱為“偽正則選擇器”，因?yàn)樗鼈兲峁╊愃?regular expression 的靈活匹配方式。

[attr|=val] : 選擇attr屬性的值是 val 或值以 val- 開(kāi)頭的元素（注意，這里的 “-” 不是一個(gè)錯(cuò)誤，這是用來(lái)處理語(yǔ)言編碼的）。

[attr^=val] : 選擇attr屬性的值以 val 開(kāi)頭（包括 val）的元素。

[attr$=val] : 選擇attr屬性的值以 val 結(jié)尾（包括 val）的元素。

[attr*=val] : 選擇attr屬性的值中包含子字符串 val 的元素（一個(gè)子字符串就是一個(gè)字符串的一部分而已，例如，”cat“ 是 字符串 ”caterpillar“ 的子字符串

CSS 屬性選擇器的最基本用法

屬性選擇器最基本的用法，就是通過(guò)元素的屬性值去選擇 DOM 元素。像這樣，將選中所有帶 href 屬性的DOM 元素：

[href] {
    color: red;
}

CodePen Demo -- 屬性選擇器基本用法

復(fù)雜一點(diǎn)點(diǎn)的用法 層疊選擇

div [href]{
...
}

多條件復(fù)合選擇

選擇一個(gè) img 標(biāo)簽，它含有 title 屬性，并且包含類名為 logo 的元素。

img[title][class~=logo]{
...
}

偽正則寫法

i 參數(shù)

忽略類名的大小寫限制，選擇包含 class 類名包含子字符串為 text，Text，TeXt... 等情況的 p 元素。
這里的 i 的含義就是正則里面參數(shù) i 的含義，ignore，忽略大小寫的意思。

p[class*="text" i] {
...
}

所以上面的選擇器可以選中類似這樣的目標(biāo)元素：

g 參數(shù)

與正則表達(dá)式不一樣，參數(shù) g 在這里表示大小寫敏感（case-sensitively）。然而，這個(gè)屬性當(dāng)前仍未納入標(biāo)準(zhǔn)，支持的瀏覽器不多。

CodePen Demo -- 屬性選擇器的偽正則用法

配合 :not() 偽類

還有一種比較常用的場(chǎng)景就是搭配:not() 偽類，完成一些判斷檢測(cè)性的功能。譬如下面這個(gè)選擇器，就可以選取所有沒(méi)有 [href] 屬性的 a 標(biāo)簽，添加一個(gè)紅色邊框。

a:not([href]){
    border: 1px solid red;
}

當(dāng)然，復(fù)雜一點(diǎn)，我們可以搭配不僅僅一個(gè) :not()偽類，像是這樣，可以同時(shí)多個(gè)配合使用，選擇一個(gè) href, target, rel 屬性都沒(méi)有的 a 標(biāo)簽：

a:not([href]):not([target]):not([rel]){
    border: 1px solid blue;
}

CodePen Demo -- 屬性選擇器配合 :not 偽類

重寫行內(nèi)樣式？

甚至乎，如果有這種場(chǎng)景，我們還可以覆蓋掉行內(nèi)樣式，像這樣:

xxxxxx

我們可以使用屬性選擇器強(qiáng)制覆蓋掉上述樣式：

[style*="color: red"] {
    color: blue !important;
}

組合拳用法，搭配偽元素提升用戶體驗(yàn)

當(dāng)然，屬性選擇器不一定只是單單的進(jìn)行標(biāo)簽的選擇。

配合上偽元素，我們可以實(shí)現(xiàn)很多有助提升用戶體驗(yàn)的功能。

角標(biāo)功能

這里有一個(gè)小知識(shí)點(diǎn)，偽元素的 content 屬性，通過(guò) attr(xxx)，可以讀取到對(duì)應(yīng) DOM 元素標(biāo)簽名為 xxx 的屬性的值。

所以，配合屬性選擇器，我們可以很容易的實(shí)現(xiàn)一些角標(biāo)功能：

Message

div {
    position: relative;
    width: 200px;
    height: 64px;
}

div::before {
    content: attr(count);
    ...
}

這里右上角的數(shù)字 5 提示角標(biāo)，就是使用屬性選擇器配合偽元素實(shí)現(xiàn)，可以適應(yīng)各種長(zhǎng)度，以及中英文，能夠節(jié)省一些標(biāo)簽。CodePen Demo -- 屬性選擇器實(shí)現(xiàn)角標(biāo)功能

屬性選擇器配合偽元素實(shí)現(xiàn)類 title 功能

我們都知道，如果給一個(gè)圖片添加一個(gè) title 屬性，當(dāng) hover 到圖片上面的時(shí)，會(huì)展示 title 屬性里面附加的內(nèi)容，類似這樣：

這里不一定是 img 標(biāo)簽，其他標(biāo)簽添加 title 屬性都能有類似的效果。但是這里會(huì)有兩個(gè)問(wèn)題：

響應(yīng)太慢，通常鼠標(biāo) hover 上去要隔 1s 左右才會(huì)出現(xiàn)這個(gè) title 框

框體結(jié)構(gòu)無(wú)法自定義，彈出框的樣式無(wú)法自定義

所以這里，如果我們希望有一些自己能夠控制樣式的可快速響應(yīng)的浮層，可以自定義一個(gè)類 title 屬性，我們把它稱作 popTitle，那么可以這樣操作：

這是一段描述性文字
這是一段描述性文字

p[popTitle]:hover::before {
    content: attr(popTitle);
    position: absolute;
    color: red;
    border: 1px solid #000;
    ...
}

對(duì)比一下，第一個(gè)是原生自帶的 title 屬性，下面兩個(gè)是使用屬性選擇器配合偽元素模擬的提示：

瀏覽器自帶的 title 屬性延遲響應(yīng)是添加一層防抖保護(hù)，避免頻繁觸發(fā)，這里也可以通過(guò)對(duì)偽元素添加一個(gè)100毫秒級(jí)的 transition-delay 實(shí)現(xiàn)延遲展示。

CodePen Demo -- 屬性選擇器配合偽元素實(shí)現(xiàn)類 title 功能

商品展示提示效果

好，上面的運(yùn)用實(shí)例我們?cè)偻卣挂幌拢紤]如何更好的運(yùn)用到實(shí)際業(yè)務(wù)中，其實(shí)也是有很多用武之地的。譬如說(shuō)，通過(guò)屬性選擇器給圖片添加標(biāo)簽，類似一些電商網(wǎng)站會(huì)用到的一個(gè)效果。

我們希望給圖片添加一些標(biāo)簽，在 hover 圖片的時(shí)候展示出來(lái)。

當(dāng)然，CSS 中，諸如  、、