CSS 选择器渲染优先级
一般情况下,CSS的优先顺序如下,这个大家应该都知道:
important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符 通配符 > 继承。
根据这个规律,可以先做下一下的题目:
#p1{color:red}
.p1{color:green}
p{color:blue}
<p id="p1" class="p1">TEST TEST TEST</p>
应该不难判断,文字的颜色是红色的,因为优先级最高。稍作修改
.d1 #p1{color:red}
#d1 .p1{color:green}
<div class="d1" id="d1">
<p id="p1" class="p1">asdfasdfasdfasd</p>
</div>
此时文字变成了绿色,是不是可以说#d1 .p1的优先级比高呢,其实还不能。换一下两组css的顺序,再看。发现颜色变红了,其实两组选择器的优先级是一样的,这种情况,写在后面的css会覆盖掉前面的定义,所以由于Css顺序的不同,呈现了不同颜色。
再回头看第一个例子,将三个样式调换顺序,如下:
.p1{color:green}
p{color:blue}
#p1{color:red}
发现第一个例子的文本颜色,还是红色,所以说优先级大的选择器,无论放在前后,都不会被优先级小的覆盖掉。
那么优先级到底怎么判断呢,如果说一个CSS组合很复杂,是不是有办法计算一个值,来衡量它的优先级呢?
比如:
.d1 .d2 #d3 .d4 .d5 .d6 .p1{color:green}
.d1 #d2 .d3 .d4 #d5 p{color:red}
如果没有计算方法,在不跑浏览器的情况下,很难确定谁的优先级比较高。当然这种多级的CSS写法很不推荐,存在效率问题。
W3C官方的确有推荐的优先级计算方法,也叫CSS权值计算方法。W3C把权值用一组数来衡量:(a,b,c,d)。
a:代表行内样式,它没有选择器,固定为1
b:代表选择器组合中,ID选择器的个数
c:代表选择器组合中,类选择器、属性选择器或伪类选择器的个数
d:元素或者伪元素选择器的个数
一些简单的例子:
* {} /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
li {} /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
li:first-line {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul li {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul ol+li {} /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
ul ol li.red {} /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
li.red.level {} /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
#x34y {} /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
style="" /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */
通过这个计算方法,计算下例子中的选择器组合的权值:
第一组:0,1,6,0
第二组:0,2,3,1
虽然拿到了数据,但还是不知道怎么比较,231>160么。大多数情况下,可以这么判断,但是如果是(0,1,60,0)跟(0,2,3,1)呢,这时候就没法用1600 > 231 去判断。
前面说个,权值是一组数,不是一个数,所以(0,1,6,0) != 160。
判断的逻辑应该这样:
从左往右,如果同位上,值大的整个组合的权值就大,如果相同,再进行下一位比较。如果位数不够,在左边补0处理。数位之间没有进制,不会满10向前一位进1。
再看例子中,第二组中第二位2大于第一组中第二位的1,所以第二组的权值大于第一组。
那important的权值怎么算呢,W3C中算然没说,但一般情况下important的权值看成1,0,0,0,0。
有些人需要用一个数代表一个权值的办法来计算,比如
1. 内联样式: 1000
2. ID 选择器: 100
3. Class 类选择器: 10
4. 标签选择器: 1
这种算法很容易让人误以为是10进制数学运算,所以当同一个选择器有10个以上时,就不能用这种方法计算。比如ID选择器有11个,那他的权值是1100,但其实还是内联样式的优先级高,虽然内联样式的权值只有1000.
分享到:
相关推荐
CSS标签选择器优先级.pdf
CSS中选择器优先级顺序实战讲解.pdf
介绍CSS中,单个选择器,以及复合选择器的权重计算规则,比如: .box #mydiv ul li.txt。通过计算选择器的权重,区别其优先级,判 断最终样式的覆盖效果。
主要介绍了关于CSS选择器优先级的判断并附结果截图,需要的朋友可以参考下
CSS选择器优先级得关系为: !important>内联>ID选择器>类选择器>标签选择器。 一种优先级算法 内联样式表的权值最高 (style=””) 权值为1000 统计选择符中的ID属性个数。(#id) 权值为100 统计选择符中的CLASS属性...
这个时候突然意识到了CSS选择器的优先级问题,这里就CSS选择器的优先级问题做了一些总结。 51CTO推荐阅读:巧妙地使用CSS选择器 选择器种类 严格来讲,选择器的种类可以分为三种:标签名选择器、类选择器和ID选择...
CSS 优先级小结 CSS初学感觉很简单,但随着学习的深入才感觉CSS的水由多深,平常总会遇到各种坑,先总结一些经常遇到的坑。
java教程超全面javaweb教程28天day2-_06_css的基本选择器的优先级
css样式优先级比较实例, css样式优先级比较实例, css样式优先级比较实例
CSS高级特性--CSS优先级 CSS优先级 01 CSS优先级 网页制作时,对统一元素,应用不同的背景,会出现什么情况? 思考 background-color:pink; background-color:blue; background-color:red; 【结论】 定义CSS样式时,...
React组件的css选择器
CSS在使用选择器对元素施加属性的时候会有先后顺序,包括特殊性和重要性等概念在内,这里我们就来详解CSS中的选择器优先级顺序,需要的朋友可以参考下
主要帮助大家深入理解CSS选择器优先级的相关内容,通过八个小例子分析比较CSS选择器优先级,感兴趣的小伙伴们可以参考一下
css基础选择器有标签选择器、类选择器、id选择器、通用选择器,本文将深入介绍css选择器优先级,这会给正在解决优先级问题的朋友,带来些许帮助
CSS选择器-.pdf
通过使用组合器(Combinator)将选择器的描述写得更加精确(参考CSS选择器 – MDN ),例如对于下述代码片段,如果想给.cellphones中的.apple增加样式,只使用.apple,势必会对.fruit中的.apple也造成影响。...
CSS核心基础--CSS基础选择器 CSS选择器 什么是CSS选择器? CSS基础选择器 01 CSS基础选择器 要想将CSS样式应用于特定的HTML元素,首先需要找到该目标元素。在CSS中,执行这一任务的样式规则部分被称为选择器。 CSS...