新手学习css优先级

这里的伪元素和伪类做一下补充说明。伪元素选择符，指的是样式作用到的元素不是html结构中的实际元素，即不是真正的dom元素。目前只有:before，:after，:first-line，:first-letter和::selection这5个伪元素选择符。伪类选择符，则是指除前边的这部分选择符之外，在css中加入冒号:的，用于实现动态效果与智能控制的选择符，比如:hover，:nth-of-type(n)。从css3开始，通过区别使用双冒号::来表示伪元素，单冒号:来表示伪类，但为了和以前的浏览器兼容，:after这种诞生于css2的伪类选择符仍然允许使用单冒号的写法。

现在，可以找一些css选择符计算一下了：

看过这些例子后，请理解为，简单的分类计数，正是css中的战斗力测量方法。(a,b,c,d) 这种形式中，abcd分别是不同的数量级，a>b>c>d，和数字的大小比较方法相同，从高位开始，如果高位数字相同，则取低一位数字比较，以此类推。选择符权重计算值最大的样式规则中的属性，覆盖其他的样式规则中的同名属性。

如果你觉得自己计算麻烦，请到Specificity Calculator，这是一个非常棒的计算器。

(a,b,c,d) 中，a代表的内联样式实际是存在于html代码中，只能取值为0或1，所以和其他的较为不同。后边的bcd虽说是不同的数量级，但详细说来有多大差距呢？请看下面这一段Firefox浏览器源代码：

可以看出，class和id对应的十六进制数值之间隔了2位，所以，在Firefox中，要256（162）个class才相当于1个id。在不同浏览器中，这种层级差距，可能有所不同。在写本文的时间点，Opera和Chrome中用256+的class也不能大于id的权重。不过，这些细节信息并不重要，你在实际使用中不可能用到这个数量的选择符。所以，应认为前面所述的权重计算方法是可靠的。

如果权重计算值相同，则进入后一个环节：样式定义顺序。

样式定义顺序

权重计算值相同的样式规则，定义顺序靠后的优先级高。这里的定义顺序，包含了所有的静态样式（不包括由javascript创建<style>或<link>元素引入的样式）定义的可能情况。如直接写在html的<style>标签内的样式规则，通过<link>引入的css文件，以及@import引入的css文件。

请记住，只有权重计算值相同的时候，你才需要考虑样式定义顺序。

!important标识符

!important是可以写在样式规则中的某一属性定义值后的标识符，用于提升某一属性的样式定义的优先级。不同于决定整条样式规则优先级的css选择符权重，!important只影响自己所在位置的单一属性。!important在优先级原则中，可以理解为前文的(a,b,c,d)结构中的，比a更高位的标识：

然后，你完全再按照前文的css选择符权重的比较方法，就可以得出在这种情况下的css优先级了。具体说的话，可以表述如下：

写有!important标识符的样式，其优先级一定大于没有该标识符的样式。

在都写有!important标识符的样式之间，再按照一般的css选择符权重的优先级原则做判断。

css优先级的浏览器兼容性

css优先级虽然是不简单的内容，但幸运的是，除IE6和IE7存在少量优先级的bug（详见IE Specificity bugs）外，几乎所有浏览器都很一致地遵循css优先级原则。所以，css优先级是很通用的概念，可以在各种情况下应用而不必担心兼容性。

结语

css优先级的概念在本文就介绍到此。本文所阐述的仍有不够全面的地方，如果你碰到一些新的问题，欢迎来这里讨论。在实际应用中，理解css优先级并不是让我们去这样分析每一条样式规则，而只是让我们有一个更清醒的状态，知道如何去布局和控制自己所写的css。所谓“知己知彼，百战不殆”，也是这样的道理。

css全名是层叠样式表（Cascading Style Sheet），css优先级正是这种“层叠”中所遵循的原则，由此也可以看出css优先级的重要性。最后，以一个自制的图来结尾：

（编辑：焦作站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!