一,前言: 刚加的css怎么没有渲染出来?浏览器中查看,发现是被其他的css给覆盖了,相信我们都曾遇到过这样的问题.那么浏览器是如何选择css标签的渲染顺序的呢?换句话说,css选择器的优先级是怎么规定的? 二.正文: 先上一个例子 <div id = "outerId" class = "outerClass"> <div id = "innererId" class = "innerClass">
最近在做项目中发现很多CSS代码里面都使用!important去覆盖原有高优先级的样式.按照常理来说,越是灵活的东西,需要做的工作就会更多.所以想当然的认为像!important这样灵活.方便的规则如果用得多的话肯定会对性能有所影响.基于这种考虑,本来想把所有的这些样式通过提高优先级给去掉的.不过后来一想,还是去google一下吧,猜想一般都是不可靠的.于是查到了这篇文章Is !important bad for performance?.下面是大概意思: firefox对于CSS的解析代码/s
样式的优先级 外部样式 < 内部样式 < 内联样式 选择器的优先权 解释: 1. 内联样式表的权值最高 1000: 2. ID 选择器的权值为 100; 3. Class 类选择器的权值为 10; 4. HTML 标签选择器的权值为 1; CSS 优先级法则: A 选择器都有一个权值,权值越大越优先: B 当权值相等时,后出现的样式表设置要优于先出现的样式表设置: C 创作者的规则高于浏览者:即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式: D 继承的CSS 样式