面试官：通熟易懂理解CSS权重

时间 2019-12-04

标签面试易懂理解 css 权重栏目快乐工作繁體版

原文原文链接

文章目录

CSS权重是什么
如何肯定权重优先级 - 特殊性
如何肯定权重优先级 - 重要性
相同权重如何显示
总结

CSS权重是什么

根据MDN的引用css

浏览器经过优先级来判断哪一些属性值与一个元素最为相关，从而在该元素上应用这些属性值。优先级是基于不一样种类选择器组成的匹配规则浏览器

换一句更为直白的就是，使用权重决定哪些CSS会被应用到文档元素中。编码

如何肯定优先级 - 特殊性

权重的优先级根据特殊性进行分布，使用四个纬度进行判断，用0.0.0.0进行表示。spa

标签选择器，伪类元素表示为0.0.0.1
类，伪类，属性选择器表示为0.0.1.0
ID选择器为0.1.0.0
行内选择器为1.0.0.0

同级的选择器能够进行叠加，值越高的优先级越高。不一样级别的不能进行比较，一概以高级别的优先级更高。code

用几个例子进行进行说明文档

示例一it

body div p { color: pink; }io

0.0.0.3class

p { color: red; }
复制代码

0.0.0.1import

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权威指南》，自认为仍是很容易记录的，并且逻辑清楚。