放張頭圖來放鬆放鬆

哈哈哈哈哈哈哈哈哈哈哈哈~

一 是的，CSS也有正則（阿門）

CSS裝逼兩利器：矩陣和正則。

其實呢，我們也不必驚訝，CSS畢竟也是一門語言，而且正則本來就是有利於某個具體語言之外的東西。

二 正則表示式的一些通用規則

無論什麼語言，正則表示式的規則都是通用的，差別可能在於書寫的形式上。

正則是個很深的話題，真要說開，可以寫一本厚厚的書！記住都很難，像我要用的時候，就百度…..

其中，有一些關鍵的字元，有著特定的含義，代表了正則表示式世界的規則。

例如：

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

等等。

這些規則在CSS世界也是通用的。

三 CSS屬性選擇器與正則表示式

CSS屬性選擇器的發展目前分為3個階段：

1. CSS2.1屬性選擇器
   直接匹配：[attr], [attr=”val”], [attr~=”val”], [attr|=”bar”]
2. CSS3屬性選擇器
   正則匹配：[foo^=”bar”], [foo$=”bar”], [foo*=”bar”]
3. 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 今天就到這~