zoukankan      html  css  js  c++  java
  • 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中不区分的

  • 相关阅读:
    【转载】CentOS 6.3(x86_64)下安装Oracle 10g R2 天高地厚
    Oracle查看表空间和删除表空间 天高地厚
    获取android手机的定位信息(转)
    android里pull解析xml文件
    google map 开发去掉图片阴影
    ubuntu12.04配置android开发环境遇到的问题
    google code中下载你的项目源码
    android无法自动生成R文件
    android中ocr解决方案(tesseract)
    自定义Android标题栏TitleBar布局(转)
  • 原文地址:https://www.cnblogs.com/xiaofenguo/p/6134303.html
Copyright © 2011-2022 走看看