CSS的特殊性 (specificity)
来源:互联网 发布:nodejs 运行sql文件 编辑:程序博客网 时间:2024/06/07 10:49
CSS的特殊性是非常重要却又经常被忽视的属性,特别是在团队合作下的产品迭代开发中,因为不注重CSS的特殊性最后导致某些代码混乱不堪,这里就把自己对CSS特殊性的认识做一些归纳总结.
CSS的特殊性(specificity)也可以称为CSS的优先级或权值:对于每个样式表规则,浏览器都会计算选择器的特殊性,从而使元素属性声明在有冲突的情况下能够正确显示.
特殊性的描述可以把它看成一个4位数: 0.0.0.0 ,数值越大的特殊性越高(例如:0.1.0.0>0.0.1.2),也是最终浏览器显示的效果.
特殊性的具体特性:
- 内联样式的特殊性为 1.0.0.0
- ID选择器的特殊性为 0.1.0.0
- 类或者伪类的特殊性为 0.0.1.0
- 元素和伪元素的特殊性为 0.0.0.1
简单的说就是:内联样式的特殊性>ID选择器>类或者伪类>元素和伪元素.
看几个例子:
<div style="backgroud:red">... /* 1.0.0.0 */#iin1{ backgroud:blue;} /* 0.1.0.0 */.iin2{ backgroud:green;} /* 0.0.1.0 */
如果这样写<div id=”iin1″ class=”iin2″ style=”backgroud:red”>…因为这几个样式定义存在冲突,所以显示效果需要根据特殊性来判断,从例子中可以很明显的看出<div style=”backgroud:red”>…/* 1.0.0.0 */最大,所以<div>的背景色最终为红色;继续:
a{ color:red;} /* 0.0.0.1 */p a{ color:blue;} /* 0.0.0.2 */p a.more{ color:green;} /* 0.0.1.2 */
根据特殊性规则:
<a href="#"></a> <a>为红色;<p><a href="#"></a></p> <a>为蓝色;<p><a href="#" class="more"></a></p> <a>为绿色;
连接符和通配符不具有特殊性
即特殊性为0.0.0.0; 例如下面两组例子,它们的的特殊性相同:
div p{ color:red;} /* 0.0.0.2 */body * p{ color:blue} /* 0.0.0.2*/
ol>li{ color:red;} /* 0.0.0.2 */ol li{ color:blue;} /* 0.0.0.2 */
那么遇到上面的情况浏览器该如何渲染呢? 浏览器会根据选择器出现的先后顺序来判断,后出现的选择器会把先出现的给覆盖掉,所以最后两组例子都会显示为蓝色.而且浏览器会将内部样式(即<style>…</style>中的样式)的顺序判断为在外链样式之后,也就是说内部样式会覆盖掉外链样式中相同的属性定义.
继承同样不具有特殊性
例:
p{ color:blue;} /* 0.0.0.1 */*{ color:red;} /* 0.0.0.0 */
虽然通配符*定义在p的后面,但最终<p>中的文字还是会显示为蓝色;值得注意的是继承的”不具有特殊性”不同于上面提到的连接符和通配符,它是连0都没有! 这又会给我们带来什么意外呢?看看下面的例子:
...<style>*{ color:red;}</style><body><p>这里的文字<em>hello</em></p></body>...
例子很好理解,因为通配符定义了所有元素,所以<p>和<em>都是的红色(这里p,em特殊性为0.0.0.0).然后我们对例子做一点修改:
...<style>*{ color:red;}.blue{ color:blue;}</style><body><p class="blue">这里的文字<em>hello</em></p></body>...
这里给<p>加了个blue的类,我们期望的是<p>里面的文字都变为蓝色,同时也想当然的认为<em>会继承<p>的blue类的蓝色,但事实却是:
提示:你可以先修改部分代码再运行。
出现这种意外的原因就在于继承的特殊性连0都没有,而通配符的特殊性为0,所以通配符的样式被显示出来…
最后一个影响特殊性的声明:!important
例:
h1{ color:red!important;}
!important被称为重要声明,被标记为!important的属性其特殊性最高,当出现有冲突的重要声明时,同样安照出现的先后顺序决定最后的显示.
例:
h1{color:red!important;}h1{color:blue!important;}
最后h1文字为蓝色
- CSS的特殊性 (specificity)
- CSS的特殊性 (specificity)
- css的特殊性
- CSS--选择器的特殊性
- CSS特殊符号的特殊性
- css的继承层叠特殊性
- css的层叠和特殊性
- CSS中padding的特殊性
- CSS priority / specificity
- css的层叠性和特殊性
- CSS的继承、层叠和特殊性
- CSS的继承、层叠和特殊性
- CSS的继承、层叠和特殊性
- CSS样式的特殊性(权重)
- HTML5 CSS的继承,特殊性和层叠
- CSS的继承、层叠和特殊性
- css的继承、层叠和特殊性
- CSS的继承、层叠、特殊性和重要性
- QFileSystemModel
- 程序员如何使用和提高搜索资料的技巧
- 第十二周 项目2 操作用邻接表存储的图
- 第十二周项目1-图基本算法库
- 干货来啦---国外程序员整理的java资源大全
- CSS的特殊性 (specificity)
- Andorid开发中WebView网页加载控件使用
- 多线程以及并行开发
- C# Json
- Java实现二叉树的创建和遍历操作(有更新)
- Ajax 上传文件,返回JSON字符串在FireFox下解析带有<pre>标签的解决办法
- 第12周项目2——操作用邻接表存储的图
- spring+mvc_返回json数据 406
- 项目三-图遍历算法实现