一 是的，CSS也有正則（阿門(mén)）

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

其實(shí)呢，我們也不必驚訝，CSS畢竟也是一門(mén)語(yǔ)言，而且正則本來(lái)就是有利于某個(gè)具體語(yǔ)言之外的東西。

二 正則表達(dá)式的一些通用規(guī)則

無(wú)論什么語(yǔ)言，正則表達(dá)式的規(guī)則都是通用的，差別可能在于書(shū)寫(xiě)的形式上。

正則是個(gè)很深的話題，真要說(shuō)開(kāi)，可以寫(xiě)一本厚厚的書(shū)！記住都很難，像我要用的時(shí)候，就百度…..

其中，有一些關(guān)鍵的字符，有著特定的含義，代表了正則表達(dá)式世界的規(guī)則。

例如：

• 字符^表示字符串開(kāi)始位置匹配；
• 字符$表示字符串結(jié)束位置匹配；
• 字符*表示字符串任意位置匹配；
• 字符i表示字符串匹配不區(qū)分大小寫(xiě)；
• 字符g表示字符串全局匹配；

等等。

這些規(guī)則在CSS世界也是通用的。

三 CSS屬性選擇器與正則表達(dá)式

CSS屬性選擇器的發(fā)展目前分為3個(gè)階段：

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

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

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

其中，后面兩個(gè)階段都屬于正則匹配階段，隨著CSS的發(fā)展，更復(fù)雜的正則匹配應(yīng)該會(huì)出現(xiàn)，我們可以拭目以待。

那這么多屬性匹配寫(xiě)法各自代表的含義是什么呢？

如下：

[attr]

只要元素有attr這個(gè)屬性就可以：

<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是老外發(fā)明的，老外的的母語(yǔ)是English, English的句子都是一個(gè)單詞+空格+一個(gè)單詞實(shí)現(xiàn)的。因此：

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

在CSS2.1的時(shí)候，CSS對(duì)其他國(guó)家的語(yǔ)言的考量還沒(méi)有那么深入。因此，像這里這種匹配“單詞”的用法只對(duì)ASCII范圍的字符有用。對(duì)于中文，哪怕你在中文中間打個(gè)空格，假裝成“單詞”，也是沒(méi)用的。因此：

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

[attr|=”bar”]

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

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

同樣的，不支持中文。要想支持中文，請(qǐng)使用CSS3屬性選擇器。

以上CSS2.1的幾個(gè)屬性選擇器從IE7瀏覽器開(kāi)始支持。但是，IE7瀏覽器并不是嚴(yán)格支持的.

[attr=^”val”]

值開(kāi)頭三個(gè)字符需要是val，于是：

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

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

[attr$=”val”]

屬性值最后三個(gè)字符需要是val，于是，因此：

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

[attr*=”val”]

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

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

以上3個(gè)屬性選擇器隸屬于CSS3，但是很神奇的是，IE7瀏覽器也是支持的。就好像IE8瀏覽器支持CSS3的box-sizing一樣，這種感覺(jué)就像是，平時(shí)都考38分的小明，突然考了61分，意外不意外驚喜不驚喜？

最后重量級(jí)嘉賓，屬性值大小寫(xiě)不敏感的i：

[attr operator value i]

例如：[attr~=”val” i], [attr*=”val” I]等都是合法的寫(xiě)法。其中，i也可以使用大寫(xiě)I。
就和正則表達(dá)式中的i作用一樣，忽略大小寫(xiě)，由于類(lèi)似中文這樣的語(yǔ)言并沒(méi)有大小寫(xiě)的概念，因此，此特性也只對(duì)ASCII范圍的字符。

我們可以舉個(gè)簡(jiǎn)單的例子對(duì)比下，現(xiàn)有選擇器[attr*=”val”]，則有：

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

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

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

再怎么大小寫(xiě)都是可以匹配的。

兼容性

目前Chrome, FireFox, Safari已支持i正則，但是，IE驚喜過(guò)后又打回了原形，包括到IE14都還沒(méi)支持不區(qū)分大小寫(xiě)：

估計(jì)很快，實(shí)際項(xiàng)目中就可以應(yīng)用此特性了。

實(shí)例

眼見(jiàn)為實(shí)，關(guān)于選擇器的正則，我做了個(gè)簡(jiǎn)易的demo，您可以狠狠地點(diǎn)擊這里：CSS選擇器正則表達(dá)式demo

如下CSS：

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

結(jié)果在FireFox瀏覽器下：

可以看出如果沒(méi)有區(qū)分大小寫(xiě)，只能捕獲一個(gè)<li>，多了個(gè)i，最后兩個(gè)都被查詢了。

到此這篇關(guān)于CSS選擇器中的正則表達(dá)式使用的文章就介紹到這了,更多相關(guān)CSS選擇器正則表達(dá)式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評(píng)論