CSS样式优先权_html/css_WEB-ITnose
程序员文章站
2022-05-20 09:58:48
...
很多时候一个元素的样式并非直接对元素定义,而是对其祖先元素定义,然后通过继承性得到样式。例如,在body中定义的文字的颜色(color)属性,在p元素中也是有效的。这就是样式的继承。
如果一个元素在多个地方定义了某个样式属性,最后哪个起作用呢?
例如:在body中定义了字体的大小,元素p的属性style中定义了文字颜色,内部样式表和外部样式表中也都定义了元素p的文字颜色,而且某段文字还用属性id和类名都定义了文字颜色。这样会导致复杂的样式层叠关系,到底谁可以起作用呢?
如果一个元素被具有相同属性名的多个样式重复作用,也就是出现了样式层叠,CSS需要通过这些样式的选择器的特殊性来进行选择其中的一个样式。选择器越特殊优先权越高,选择器优先权最高的样式被选中。如果最高优先权的有多个,则要看这些样式中哪个样式离这个元素最近,离得最近的被选中。
选择器的特殊性可以根据下面的规则来确定:
(1)对于id选择器,每个特殊性加0100;
(2)对于类选择器,属性选择器,伪类选择器,每个特殊性加0010;
(3)对于标签选择器和伪元素选择器,每个特殊性加0001;
(4)每个元素只能定义一个行内样式,行内样式的特殊性为1000;
(5)对于结合符和通用选择器,它对特殊性没有贡献,其特殊性为0000;
(6)对于继承得来的选择器没有任何特殊性,其特殊性为0000;
(7)加上!important的样式具有最高的优先权。
优先权比较:
0100 > 0020;
0021 > 0020;
特殊性计算例子
推荐阅读
-
Codeforces Round #246 (Div. 2) ?B. Football Kit_html/css_WEB-ITnose
-
css+div总结【css+div】_html/css_WEB-ITnose
-
外挂级神器!内置700+免费字体直接用的PS插件FontTea_html/css_WEB-ITnose
-
子DIV设置了外边距为什么父级也跟着下移了_html/css_WEB-ITnose
-
IE6 下,无法固定页面顶部的DIV_html/css_WEB-ITnose
-
一张图看懂css的position里的relative和absolute的区别_html/css_WEB-ITnose
-
在Gulp中使用BrowserSync_html/css_WEB-ITnose
-
div设置margin:0 auto;后弹出框错位,求解!_html/css_WEB-ITnose
-
如何平铺整个页面_html/css_WEB-ITnose
-
select 下拉框如何可以选择option里面的值,也可以用户自己输入啊?_html/css_WEB-ITnose