你对 CSS 的权重和优先级了解吗? 可以简单说下 。

我们的回答可以通过以下方式来回答:

1. 权重:

1. 权重概念:
   1. 权重, 是一个相对的概念, 是针对某一指标而言; 某一指标的权重是指该指标在整体评价中的相对重要程度 。
2. CSS权重 指的是 css 选择器的优先级, 优先级高的 css 样式会覆盖优先级低的 css 样式, 优先级越高说明权重越高, 反之亦然 。

2. 优先级:

1. css优先级规则:
   1. css 选择规则的权值不同时, 权值高的优先;
   2. css 选择规则的权值相同时, 后定义的规则优先;
   3. css 属性后面加 !important 时, 无条件绝对优先;

2. 权值的计算:
   1. 第一等级: 代表 内联样式; 如 style="", 权值为 1,0,0,0 。
   2. 第二等级: 代表 ID选择器; 如 #id="", 权值为 0,1,0,0 。
   3. 第三等级: 代表 calss | 伪类 | 属性 选择器; 如 .class | :hover,:link,:target | [type], 权值 0,0,1,0 。
   4. 第四等级: 代表 标签 | 伪元素 选择器; 如 p | ::after, ::before, ::fist-inline, ::selection, 权值 0,0,0,1 。
   5. 通用选择器 (\*), 子选择器(>), 相邻同胞选择器(+) 等选择器不在4等级之内, 所以它们的权值都为 0,0,0,0 。

3. 权值计算公式:
   1. 权值 = 第一等级选择器\*个数, 第二等级选择器\*个数, 第三等级选择器\*个数, 第四等级选择器\*个数 。

4. 权值比较规则:
   1. 当两个权值进行比较的时候, 是从高到低逐级将等级位上的权重值(如 权值 1,0,0,0 对应--> 第一等级权重值, 第二等级权重值, 第三等级权重值, 第四等级权重值)来进行比较的, 而不是简单的 1000\*个数 + 100\*个数 + 10\*个数 + 1\*个数 的总和来进行比较的, 换句话说, 低等级的选择器, 个数再多也不会越等级超过高等级的选择器的优先级的;
   2. 总结比较经验:
      1. 先从高等级进行比较, 高等级相同时, 再比较低等级的, 以此类推 。
      2. 完全相同的话, 就采用 后者优先原则(也就是样式覆盖) 。
      3. css 属性后面加 !important 时, 无条件绝对优先(比内联样式还要优先) 。

5. 选择器的优先级(继承不如指定):
   1. css 属性 !important
   2. 内联样式
   3. ID 选择器(#id)
   4. 类选择器(.class) = 伪类选择器(:hover等) = 属性选择器[type等]
   5. 元素选择器(p等) = 伪元素选择器(:after/:before/::selection等)
   6. 通用选择器(\*)
   7. 继承的样式
             

之前有整理过部分知识点, 现在将整理的相关内容, 验证之后慢慢分享给大家; 这个专题是 "前端面试题" 的相关专栏; 大概会有200+的文章。

如果对大家有所帮助，可以点个关注、点个赞; 文章会持续打磨 。

有什么想要了解的前端知识, 可以在评论区留言, 会及时分享所相关内容 。