css的优先级之前一直没怎么注意没当回事,总以为对同一元素靠后的渲染会覆盖前面的渲染,要是覆盖不了那就来个!important嘛。直到我那在学前端基础的后端伙伴拿一个问题问住了我,我才意识到这是重点中的重点啊!啪啪啪打脸!
优先级关系
先来看css为元素添加样式的几种规则(优先级a>b>c>d,!important无敌)
权重计算
在学习过程中,你可能发现给选择器加权值的说法,即 ID 选择器权值为 100,类选择器权值为 10,标签选择器权值为 1,当一个选择器由多个 ID 选择器、类选择器或标签选择器组成时,则将所有权值相加,然后再比较权值。这种说法其实是有问题的,但普通情况下这个已足够我们判断,很少情况下会如如下例子这么极端:
比如一个由 11 个类选择器组成的选择器和一个由 1 个 ID 选择器组成的选择器指向同一个标签,按理说 110 > 100,应该应用前者的样式,然而事实是应用后者的样式。错误的原因是:权重的进制是并不是十进制,CSS 权重进制在 IE6 为 256,后来扩大到了 65536,现代浏览器则采用更大的数量。
还是拿刚刚的例子说明。11 个类选择器组成的选择器的总权值为 110,但因为 11 个均为类选择器,所以其实总权值最多不能超过 100, 你可以理解为 99.99,所以最终应用后者样式。
补充
0.继承得到的样式的优先级最低。
1.虽然提高选择器的权重值能有效解决靠后的渲染失败问题,但也仅仅是个解决方法,渲染不冲突的情况下,不要写那么多累赘
2.!important虽无敌和style虽一人之下,但都应尽量避免使用