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中不区分的
css 选择器中的正则表达式的更多相关文章
- 【轻松前端之旅】CSS选择器中的空格与尖括号有何区别?
CSS选择器中的空格与尖括号有何区别? 例子1: .a .b { margin: 0; } 空格隔开a和b,选择所有后代元素. 例子2: .a>.b { margin: 0; } 尖括号隔开a和 ...
- css选择器中:first-child 与 :first-of-type的区别
## css选择器中:first-child 与 :first-of-type的区别 ---- :first-child选择器是css2中定义的选择器,从字面意思上来看也很好理解,就是第一个子元素.比 ...
- CSS选择器中的特殊性
我们来看一下一个简单的例子: <!DOCTYPE html><html lang="en"><head> <meta charset=&q ...
- CSS选择器中带点(.)怎么办?
在SharePoint中很多元素的ID都用点(.)来连接的,比如: <li class="ms-cui-group" id="Ribbon.Documents.Ed ...
- css选择器中:first-child与:first-of-type的区别
:first-child选择器是css2中定义的选择器,从字面意思上来看也很好理解,就是第一个子元素.比如有段代码: p:first-child 匹配到的是p元素,因为p元素是div的第一个子元素: ...
- [转] css选择器中:first-child与:first-of-type的区别
:first-child选择器是css2中定义的选择器,从字面意思上来看也很好理解,就是第一个子元素.比如有段代码: p:first-child 匹配到的是p元素,因为p元素是div的第一个子元素: ...
- CSS系列:CSS选择器
选择器(selector)是CSS中很重要的概念,所有HTML语言中的标记样式都是通过不同的CSS选择器来控制的.用户只需要通过选择对不同的HTML标签进行选择,并赋予各种样式声明,即可实现各种效果. ...
- 【CSS】使用CSS选择器
CCS选择器的作用是找出某类元素.以便使我们使用style元素或者外部样式表对这类元素设置样式. 1.使用CSS基本选择器 有些选择器使用起来非常简单,我们把这部分选择器称为基本选择器(basic s ...
- CSS选择器以及优先级与匹配原理
最常用的五类CSS选择器 准确而简洁的运用CSS选择器会达到非常好的效果.我们不必通篇给每一个元素定义类(class)或ID,通过合适的组织,可以用最简单的方法实现同样的效果.在实际工作中,最常用的选 ...
随机推荐
- 【swagger】1.swagger提供开发者文档--简单集成到spring boot中【spring mvc】【spring boot】
swagger提供开发者文档 ======================================================== 作用:想使用swagger的同学,一定是想用它来做前后台 ...
- Go --- GC优化经验
不想看长篇大论的,这里先给个结论,go的gc还不完善但也不算不靠谱,关键看怎么用,尽量不要创建大量对象,也尽量不要频繁创建对象,这个道理其实在所有带gc的编程语言也都通用. 想知道如何提前预防和解决问 ...
- c++中c_str()函数
https://zhidao.baidu.com/question/104592558.html
- 制作ubuntu U盘安装盘
sudo dd if=ubuntu.iso of=/dev/sdb2 sudo syslinux /dev/sdb1
- [Javascript] Use a custom sort function on an Array in Javascript
Sorting in Javascript with sort uses lexical sorting by default, which means it will sort in alphabe ...
- Thinking in React(翻译)
下面是React官方文档中的Thinking inReact文章的翻译,第一次翻译英文的文章,肯定有非常多不对的地方,还望多多包涵. 原文地址:https://facebook.github.io/r ...
- vue - 前置工作
vue 中文官网:https://cn.vuejs.org/ vue ES6语法:https://www.cnblogs.com/zhouyangla/p/7225335.html vue Debug ...
- UVa567_Risk(最短路)(小白书图论专题)
解题报告 option=com_onlinejudge&Itemid=8&category=7&page=show_problem&problem=508"& ...
- Ikki's Story IV - Panda's Trick (poj 3207 2-SAT)
Language: Default Ikki's Story IV - Panda's Trick Time Limit: 1000MS Memory Limit: 131072K Total S ...
- 怎样求结构体成员的偏移地址 || 结构体的 sizeof 总结
C 语言中同意将值为 0 的变量强制转换成任一类型的指针,转换结果是一个NULL指针. (type*)0 // 一个 type 类型的NULL指针 用这个指针訪问结构体内的成员是非法的,可是 & ...