CSS样式优先级
浏览数：20 /
时间：2015年06月09日
CSS样式可以有很多种选择器形式，它们的权重可以用四位数字 X X X X 来表示。
首先，HTML元素的内联样式权重最高，可以用 1 0 0 0 来表示；
其次，ID选择器的样式权重次之，可以用 0 1 0 0 来表示；
第三，类选择器、属性选择器、伪类选择器，可以用 0 0 1 0 来表示；
第四，HTML元素选择器、伪元素选择器权重最低，可以用 0 0 0 1 来表示；
第五，通配符选择器，权重完全为0，对权重无贡献，可以用 0 0 0 0 来表示。
在一个HTML文档中，页面中的每一个元素的CSS样式可以定义很多个，可以通过不同的选择器定义CSS样式，最终页面上显示的样式就是权重最高的一个。
例：
<a id="lnk1" class="cls1" name="tom" style="color: red;">TEST</a>
其CSS样式为：
#lnk1 {
color: gray;
}
.cls1 {
color: green;
}
[name="tom"] {
color: green;
}
a {
color: yellow;
}
对于lnk1来说，其color样式计算过程：
color 权重
red 1 0 0 0
gray 0 1 0 0
green 0 0 2 0
yellow 0 0 0 1
如此比较之后，red颜色权重最高，因为第一位数字权重最高，二三四位数字权重依次降低。
如果出现多个权重一致的样式，则按照其出现的先后顺序，取最后的一个。
!important
如果某个CSS样式加了!important标记，那么此样式的权重高于其他所有样式。
可以理解为：在四位数字的权重的基础上，再添加一位来表示重要样式的权重 ：1 X X X X。
**************************************************************************************************
以上涉及到的CSS样式都是由网站管理员编写发布的，可以把此来源称为“作者”，一般还需要考虑另外两种样式来源：读者、用户代理。
读者，即浏览网页的用户，可以通过一些手段来修改HTML页面元素的样式。例如Firefox可以通过Firebug来修改样式。
用户代理，通常指浏览器，一些浏览器可以通过设置选项来修改页面元素的样式。
按照来源排序，CSS样式的优先级应为：
1.用户设置的重要样式。
2.作者编写的重要样式。
3.作者编写的一般样式。
4.用户设置的一般样式。
5.浏览器设置的样式。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
