css 選擇器中的正則表達式


正則表達式在任何語言中都有使用,只是使用的形式不一樣而已

css也是一門語言,也有自己的正則表達式

正則表達式中的一些通用規則:

1 ^ 表示字符串開始位置匹配

2 $表示字符串結束為止匹配

3 *表示字符串任意位置匹配

4 i表示字符串匹配不區分大小寫

5 g 表示字符串全局匹配

css屬性選擇器與正則表達式:

1 [attr="val"] 選擇attr屬性值只為val的元素<div attr="val"/>

2[attr]選擇有attr這個屬性的元素(區分大小寫) <div attr="val"/> <div attr /> <div attr="val5435454"/>

3 [attr~="val"] 選擇屬性為attr,並且屬性值包含val單詞的元素(區分大小寫) <div attr="text val"/> <div attr="val"/> || 錯誤的:<div attr="val-ue"/> <div attr="value"/>

4 [attr$="val"]選擇屬性attr的值結尾為val字符的元素 (區分大小寫)<div attr="text val"/>  <div attr="val"/> <div attr="434val"/> || 錯誤的:<div attr="val323"/> <div attr="val-ue"/>

5[attr^="val"]選擇屬性attr的值開頭為val字符的元素 (區分大小寫)<div attr="val"/> <div attr="val-ue"/> <div attr="value"/>|| 錯誤的:<div attr="text val"/> 

6 [attr*="val"]選擇屬性attr的值任意位置包含val字符的元素(區分大小寫)<div attr="text val"/> <div attr="val"/> <div attr="val-ue"/> <div attr="value"/> 

7 [attr|="val"] 選擇屬性attr的值開頭為val的單詞或者為val-單詞的元素(區分大小寫)div attr="val"/> <div attr="val-ue"/>  || 錯誤的:<div attr="val  text "/> <div attr="text val"/> <div attr="value"/>

8 [attr*="val" I]或者[attr*="val" i]選擇屬性attr的值任意位置包含val或者VAL或者 Val 或者vAl或者 vaL字符(不區分大小寫)的元素<div attr="text val"/> <div attr="val"/> <div attr="val-ue"/> <div attr="value"/><

   div attr="Val"/> <div attr="VAL"/><div attr="VAl"/> <div attr="vaL"/> 

目前Chrome, FireFox, Safari已支持i正則,但是ie不支持不區分大小寫,別的屬性選擇器ie7+都都支持

 

 

ie7的一些特點:

1 ie7 不認識原生的[checked]屬性

在ie7下解析[checked]為[CHECKED]全部大寫化,這時候的屬性應該是defaultChecked

2 ie7 不認識部分的只用屬性選擇器:[type='checkbox'] { display:none;} 這樣定義是不起作用的,需要改成例如:input[type='checkbox'] { display:none;} 但是id就可以例如#demo{ display:none;}是起作用的 

3 ie7中屬性名是嚴格區分大小寫的,在html和css中不區分的

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM