css优先级
来源:互联网 发布:mysql gtid原理 编辑:程序博客网 时间:2024/06/05 02:12
CSS优先级详解
概念
浏览器是通过判断优先级,来决定到底哪些属性值是与元素最相关的,从而应用到该元素上。优先级是由选择器组成的匹配规则决定的。
如何计算?
优先级是根据由每种选择器类型构成的级联字串计算而成的. 它不是一个对应相应匹配表达式的权重值.
如果优先级相同,元素最终会应用 CSS 中靠后的声明.
注意: 在文档树中的距离是不会对元素优先级计算产生影响的.(可以看文档中无视DOM树中的距离的例子)
优先级顺序
下列是一份优先级逐级增加的选择器列表:
- 通用选择器
*
- 元素(类型)选择器
- 类选择器
- 属性选择器
- 伪类
- ID 选择器
- 内联样式
事实上,元素还可以从父元素上继承一些样式,如color等属性。这些继承的样式的优先级永远低于元素本身的样式,包括通用选择器:
<div id='test'> <a href="#">text</a></div>
* { color:red;}#test{ color:blue; }
最终text的颜色是红色的。
!important
规则是例外
当!important
规则被应用在一个样式声明中时,该样式声明会覆盖CSS中任何其他的声明, 无论它处在声明列表中的哪个位置. 尽管如此, !important
规则还是与优先级毫无关系使用!important
不是一个好习惯,因为它改变了你样式表本来的级联规则,从而难以调试。
一些不成文规则
不要在全站范围的css中使用
!important
.只在需要覆盖全站范围的css或是外部css(例如引用的ExtJs或是YUI)的时候才在指定的页面上使用
!important
。不要在你的插件中使用
!important
。永远都要优先考虑使用样式规则的优先级来解决问题而不是
!important
。
取而代之,你可以:
更好的利用CSS的级联属性
更多的使用适合的选择器。比如在你需要选定的对象元素前加上更多的元素,使选择的范围缩小,你的选择器就变得更有针对性,从而提高优先级:
<div id="test"> <span>Text</span></div>div#test span { color: green }span { color: red }div span { color: blue }
无论你css语句的顺序是什么样的,文本都会是绿色的(green)因为这一条规则是最有特殊性、优先级最高的。(同理,无论语句顺序怎样,蓝色(blue)的规则都会覆盖红色(red)的规则)
什么时候应该使用:
A) 一种情况
你的网站上有一个设定了全站样式的CSS文件,同时你(或是你同事)写了一些效果通常都是很差的行内样式(行内样式的优先级是最高的)。
在这种情况下,你就可以在你全局的CSS文件中写一些!important
的样式来覆盖掉那些直接写在元素上的行内样式。
活生生的例子比如:有人在jQuery插件里写了糟糕的行内样式。
B) 另一种情况
#someElement p { color: blue;}p.awesome { color: red;}
在外层有 #someElement 的情况下,
你怎样能使 awesome
的段落变成红色呢?这种情况下,如果不使用!important,第一条规则永远比第二条的优先级更高。
怎样覆盖掉 !important
很简单,你只需要再加一条 !important
的CSS语句,将其应用到更高优先级的选择器(在原有基础上添加额外的标签、class或id选择器)上;或是保持选择器一样,但添加的位置需要在原有声明的后面(优先级相同的情况下,后边定义的会覆盖前边定义的)。
<div> <a href="#" id="test">text</a></div>
想要把原有的绿色文本变成红色,提升优先级的方式:
#test.a{ color: red !important;<!--尽管这条声明在前,但是仍会覆盖下边的样式-->}a{ color: green !important;}
不过
a{ color: green !important;}a{ color: red !important;<!--同样的选择器,后边的声明会覆盖前边的-->}
更多关于important的帖子:
http://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css
http://stackoverflow.com/questions/9245353/what-does-important-in-css-mean
http://stackoverflow.com/questions/5701149/when-to-use-important-property-in-css
http://stackoverflow.com/questions/11178673/how-to-override-important
http://stackoverflow.com/questions/2042497/when-to-use-important-to-save-the-day-when-working-with-css
:not
伪类例外
:not
否定伪类在优先级计算中不会被看作是伪类. 尽管如此, 在计算选择器数量时还是会把伪类当做普通选择器进行计数.
这是一块CSS代码:
div.outer p { color:orange;}div:not(.outer) p { color: lime;}
当它被应用在下面的HTML时:
<div class="outer"> <p>This is in the outer div.</p> <div class="inner"> <p>This text is in the inner div.</p> </div></div>
会在屏幕上出现以下结果:
This is in the outer div. (orange)
This text is in the inner div. (lime)
基于类型的优先级
优先级是根据选择器类型进行计算的. 在下面的例子中,属性选择器尽管选择了一个ID但是在优先级计算法则中还是根据其类型计算 .
有如下样式声明:
* #foo { color: green;}*[id="foo"] { color: purple;}
将其应用在下面的HTML中:
<p id="foo">I am a sample text.</p>
最终会出现下面的效果:
I am a sample text. (green)
因为即使选择的是相同的元素,但是 ID 选择器有更高优先级,所以第一条样式声明生效.
无视DOM树中的距离
有如下样式声明:
body h1 { color: green;}html h1 { color: purple;}
当它应用在下面的HTML时:
<html><body> <h1>Here is a title!</h1></body></html>
- CSS优先级,优先级计算
- css 优先级
- CSS优先级
- css优先级
- css优先级
- CSS优先级
- CSS优先级
- CSS优先级
- css优先级
- CSS优先级
- CSS优先级
- CSS优先级
- CSS优先级
- CSS优先级
- CSS优先级
- CSS优先级
- CSS优先级
- CSS优先级
- 浅谈Android动画(慕课网视频网址:http://www.imooc.com/video/7363)
- ie可兼容删除节点
- App 的登陆安全机制
- bittorrent-4.0.3源码分析(一)客户端下载
- 通过getDecorView获取屏幕截图失败的总结
- css优先级
- 浏览器 console.log 样式
- jquery 获取图片真实大小的两种方法
- JavaScript Number对象的toFixed() 方法
- c:forEach 两个循环同步进行
- nginx php 安装
- 用python/java实现hmacmd5加密的一个示例
- Snort安装
- 环境变量的配置,Tomcat安装配置