正则表达式在任何语言中都有使用,只是使用的形式不一样而已

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中不区分的

css 选择器中的正则表达式的更多相关文章

  1. 【轻松前端之旅】​CSS选择器中的空格与尖括号有何区别?

    CSS选择器中的空格与尖括号有何区别? 例子1: .a .b { margin: 0; } 空格隔开a和b,选择所有后代元素. 例子2: .a>.b { margin: 0; } 尖括号隔开a和 ...

  2. css选择器中:first-child 与 :first-of-type的区别

    ## css选择器中:first-child 与 :first-of-type的区别 ---- :first-child选择器是css2中定义的选择器,从字面意思上来看也很好理解,就是第一个子元素.比 ...

  3. CSS选择器中的特殊性

    我们来看一下一个简单的例子: <!DOCTYPE html><html lang="en"><head> <meta charset=&q ...

  4. CSS选择器中带点(.)怎么办?

    在SharePoint中很多元素的ID都用点(.)来连接的,比如: <li class="ms-cui-group" id="Ribbon.Documents.Ed ...

  5. css选择器中:first-child与:first-of-type的区别

    :first-child选择器是css2中定义的选择器,从字面意思上来看也很好理解,就是第一个子元素.比如有段代码: p:first-child  匹配到的是p元素,因为p元素是div的第一个子元素: ...

  6. [转] css选择器中:first-child与:first-of-type的区别

    :first-child选择器是css2中定义的选择器,从字面意思上来看也很好理解,就是第一个子元素.比如有段代码: p:first-child  匹配到的是p元素,因为p元素是div的第一个子元素: ...

  7. CSS系列:CSS选择器

    选择器(selector)是CSS中很重要的概念,所有HTML语言中的标记样式都是通过不同的CSS选择器来控制的.用户只需要通过选择对不同的HTML标签进行选择,并赋予各种样式声明,即可实现各种效果. ...

  8. 【CSS】使用CSS选择器

    CCS选择器的作用是找出某类元素.以便使我们使用style元素或者外部样式表对这类元素设置样式. 1.使用CSS基本选择器 有些选择器使用起来非常简单,我们把这部分选择器称为基本选择器(basic s ...

  9. CSS选择器以及优先级与匹配原理

    最常用的五类CSS选择器 准确而简洁的运用CSS选择器会达到非常好的效果.我们不必通篇给每一个元素定义类(class)或ID,通过合适的组织,可以用最简单的方法实现同样的效果.在实际工作中,最常用的选 ...

随机推荐

  1. 基于R-Tree的最近邻查询

    转自基于R-Tree的最近邻查询 BAB(Branch.and.Band)算法是由Nick Roussopoulousnl等人于1995年提出的,是最早的基于R.树的静态最近邻查询算法.该算法使用MI ...

  2. Tomcat服务器解析“GET /JavaWebDemo1/1.jsp HTTP/1.1”

    (2)服务器收到http请求报文,返回http响应报文 Tomcat服务器解析“GET /JavaWebDemo1/1.jsp HTTP/1.1” Tomcat服务器解析“GET /JavaWebDe ...

  3. 【Todo】【读书笔记】Career Cup 150笔记

    下载了第五版:/Users/baidu/Documents/Data/Interview/算法与数据结构/<CareerCup+Top+150+Questions+5th.pdf> 参考这 ...

  4. Andriod 从源码的角度详解View,ViewGroup的Touch事件的分发机制

    转自:xiaanming的博客(http://blog.csdn.net/xiaanming/article/details/21696315) 今天这篇文章主要分析的是Android的事件分发机制, ...

  5. JavaScript你所不知道的困惑(2)

    困惑一: var obj1 = new Object(); var obj2 = obj1; obj1.name = "阳光小强"; alert(obj2.name); //输出结 ...

  6. PHP-MySQL,PHP-MySQLi,PDO的差异

    PHP-MySQL是PHP操作MySQL数据库最原始的Extension ,PHP-MySQLi的i代表Improvement ,提供了更加高级的功能,就Extension而言,本身也增加了安全性.而 ...

  7. busybox 终端支持 ctrl-r

    Busybox Settings ---> Busybox Library Tuning ---> [*] History saving [ ] Save history on shell ...

  8. JavaScript提高:001:ASP.NET使用easy UI

    jQuery EasyUI是一组基于jQuery的UI插件集合.能够简洁的开发出功能多内容丰富的界面,而不须要开发人员自己费力的写那些复杂的js代码.本文简介在ASP.NET开发中引用这些js文件和样 ...

  9. 通视频URL截取第一帧图片

    为了方便直接给UIImage加个类别,以后什么时候使用可以直接调用. #import <UIKit/UIKit.h> @interface UIImage (Video) /** 通过视频 ...

  10. LeetCode(26)题解:Remove Duplicates from Sorted Array

    https://leetcode.com/problems/remove-duplicates-from-sorted-array/ Given a sorted array, remove the ...