文章目录
- CSS权重是什么
- 如何确定权重优先级 - 特殊性
- 如何确定权重优先级 - 重要性
- 相同权重如何显示
- 总结
CSS权重是什么
根据MDN的引用
浏览器通过优先级来判断哪一些属性值与一个元素最为相关，从而在该元素上应用这些属性值。优先级是基于不同种类选择器组成的匹配规则
换一句更为直白的就是，使用权重决定哪些CSS会被应用到文档元素中。
如何确定优先级 - 特殊性
权重的优先级根据特殊性进行分布，使用四个纬度进行判断，用0.0.0.0进行表示。
- 标签选择器，伪类元素表示为0.0.0.1
- 类，伪类，属性选择器表示为0.0.1.0
- ID选择器为0.1.0.0
- 行内选择器为1.0.0.0
同级的选择器可以进行叠加，值越高的优先级越高。不同级别的不能进行比较，一律以高级别的优先级更高。
用几个例子进行进行说明
-
示例一
body div p { color: pink; }
0.0.0.3
p { color: red; }
复制代码0.0.0.1
div p { color: green; }
复制代码0.0.0.2
优先级为第一个最高，因为使用了三个标签选择器确定了优先级为三。页面p中呈现的颜色为pink；
-
示例二
.title { color: blue; }
0.0.1.0
p.title { color: blueviolet; }
复制代码0.0.1.1
// 给p元素设置一个pset属性
p[pset].title { color: brown; }
复制代码0.0.2.1
优先级最高的为第三个，其中属性选择器，类选择器叠加为2，标签选择器为1。所有优先显示第三个。
-
示例三
.title { color: red; }
0.0.1.0
div p[pset].title { color: green; }
复制代码0.0.2.2
#p-id { color: brown; }
复制代码0.1.0.0
这里会有限显示第三组，CSS在优先级的选择上，是不尽兴跨等级比较，即只需要高等级有值，则只会在高等级进行比较。因为ID选择器在第三等级，高于第三和第四等级，所以不论第三和第四等级时候有值，只会选择第三等级进行比较。
-
示例四
div p[pset].title { color: green; }
0.0.2.2
#p-id { color: brown; }
复制代码0.1.0.0
这里会优先显示yellow，行内元素的等级最高，为1.0.0.0，基于跨等级不进行比较，所有无需关心除了第一等级以外的优先级。
如何确定权重优先级 - 重要性
区别于CSS的特殊性，还有另外一个重要的特性，就是重要性 !important，important和特殊性不在一个维度上，不能进行值大小的比较。重要性的优先级是永远高于特殊性的。所以只要使用了!important，则一直优先显示重要性制定的CSS属性。
.title { color: green !important; }
复制代码相同权重如何显示
当针对同一个元素有几组CSS描述，难免会有权重相同的。这个时候如何进行显示，则依赖于就近原则，即最后出现的CSS描述会被浏览器使用。我们一般认为"行内元素" > "内联" > "外部链接"。但是也有可能外部链接是嵌入到内联的下方，此时在权重相同的时候会优先显示外链的CSS。如下编码方式。就近原则同样适用于重要性，后出现的!important会覆盖之前的!important。
<head>
<style></style>
<link rel="stylesheet" href="some.css">
</head>
复制代码总结
网上关于CSS权重的文章汗牛充栋，很大一部分直接使用100，10这种记法。但是并不知道100，10如何而来，导致一直不容易记住。本文对权重的记录方案来自于《CSS权威指南》，自认为还是很容易记录的，而且逻辑清楚。
扫一扫
390
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
