CSS選擇器中的正則表達式

放張頭圖來放松放松

哈哈哈哈哈哈哈哈哈哈哈哈~
一 是的，CSS也有正則（阿門）
CSS裝逼兩利器：矩陣和正則。
其實呢，我們也不必驚訝，CSS畢竟也是一門語言，而且正則本來就是有利於某個具體語言之外的東西。
二 正則表達式的一些通用規則
無論什麼語言，正則表達式的規則都是通用的，差別可能在於書寫的形式上。
正則是個很深的話題，真要說開，可以寫一本厚厚的書！記住都很難，像我要用的時候，就百度…..
其中，有一些關鍵的字符，有著特定的含義，代表了正則表達式世界的規則。
例如：

• 字符^表示字符串開始位置匹配；
• 字符$表示字符串結束位置匹配；
• 字符*表示字符串任意位置匹配；
• 字符i表示字符串匹配不區分大小寫；
• 字符g表示字符串全局匹配；

等等。
這些規則在CSS世界也是通用的。
三 CSS屬性選擇器與正則表達式
CSS屬性選擇器的發展目前分為3個階段：

CSS2.1屬性選擇器 直接匹配：[attr], [attr=”val”], [attr~=”val”], [attr|=”bar”]

CSS3屬性選擇器 正則匹配：[foo^=”bar”], [foo$=”bar”], [foo*=”bar”]

CSS4屬性選擇器 忽略大小寫匹配：[attr=”val” i]

其中，後面兩個階段都屬於正則匹配階段，隨著CSS的發展，更複雜的正則匹配應該會出現，我們可以拭目以待。
那這麼多屬性匹配寫法各自代表的含義是什麼呢？
如下：

• [attr]

只要元素有attr這個屬性就可以：

<div attr="val"></div>
<div attr="text val"></div>
<div attr="value"></div>
<div attr="val-ue"></div> 

• [attr=”val”] 元素的屬性名是’attr’值必須是’val’：

<div attr="val"></div>
<div attr="text val"></div>
<div attr="value"></div>
<div attr="val-ue"></div> 

• [attr~=”val”]

‘attr’值需含有單詞’val’，注意這裏的措辭是“單詞”而不是字符，CSS是老外發明的，老外的的母語是English, English的句子都是一個單詞+空格+一個單詞實現的。因此：

<div attr="val"></div>
<div attr="text val"></div>
<div attr="value"></div>
<div attr="val-ue"></div> 

在CSS2.1的時候，CSS對其他國家的語言的考量還沒有那麼深入。因此，像這裏這種匹配“單詞”的用法只對ASCII範圍的字符有用。對於中文，哪怕你在中文中間打個空格，假裝成“單詞”，也是沒用的。因此：

[attr~="我"]
<div attr="我 帥 氣 的 狠"></div> 

• [attr|=”bar”]

attr’屬性值開頭必須是bar的單詞，或者開頭是bar-。同樣的，是“單詞”，不是“字符”，因此有：

<div attr="bar"></div> 
<div attr="bar-val"></div>
<div attr="barval"></div>
<div attr="bar val"></div> 

同樣的，不支持中文。要想支持中文，請使用CSS3屬性選擇器。
以上CSS2.1的幾個屬性選擇器從IE7瀏覽器開始支持。但是，IE7瀏覽器並不是嚴格支持的.

• [attr=^”val”]

值開頭三個字符需要是val，於是：

<div attr="val"></div>
<div attr="text val"></div>
<div attr="value"></div>
<div attr="val-ue"></div> 

可對比上面的[attr|=”bar”]感受下“單詞”和“字符”的區別。

• [attr$=”val”]

屬性值最後三個字符需要是val，於是，因此：

<div attr="val"></div>
<div attr="text val"></div>
<div attr="value"></div>
<div attr="val-ue"></div>

• [attr*=”val”]

屬性值任意位置包含val這三個字符就可以，因此：

<div attr="val"></div>
<div attr="text val"></div>
<div attr="value"></div>
<div attr="val-ue"></div> 

以上3個屬性選擇器隸屬於CSS3，但是很神奇的是，IE7瀏覽器也是支持的。就好像IE8瀏覽器支持CSS3的box-sizing一樣，這種感覺就像是，平時都考38分的小明，突然考了61分，意外不意外驚喜不驚喜？
最後重量級嘉賓，屬性值大小寫不敏感的i：

• [attr operator value i]

例如：[attr~=”val” i], [attr*=”val” I]等都是合法的寫法。其中，i也可以使用大寫I。 就和正則表達式中的i作用一樣，忽略大小寫，由於類似中文這樣的語言並沒有大小寫的概念，因此，此特性也只對ASCII範圍的字符。
我們可以舉個簡單的例子對比下，現有選擇器[attr*=”val”]，則有：

<div attr="VAL"></div>
<div attr="Text val"></div>
<div attr="Value"></div>
<div attr="Val-ue"></div> 

但是，如果多了個i，code>[attr*=”val” i]，則：

<div attr="VAL"></div>
<div attr="Text val"></div>
<div attr="Value"></div>
<div attr="Val-ue"></div>

再怎麼大小寫都是可以匹配的。
兼容性 目前Chrome, FireFox, Safari已支持i正則，但是，IE驚喜過後又打回了原形，包括到IE14都還沒支持不區分大小寫：

估計很快，實際項目中就可以應用此特性了。
實例 眼見為實，關於選擇器的正則，我做了個簡易的demo，您可以狠狠地點擊這裏：CSS選擇器正則表達式demo
如下CSS：

li[data-index^='t'] {
 color: red;
}
li[data-index^='f'] {
 color: blue;
}
li[data-index^='f' i]:after {
 content: '✓支持i正則';
 color: green;
}

結果在FireFox瀏覽器下：

可以看出如果沒有區分大小寫，只能捕獲一個<li>，多了個i，最後兩個都被查詢了。
OK 今天就到這~