11种样式选择器与样式优先级计算

---

theme: channing-cyan

highlight: a11y-dark

11种样式选择器与样式优先级计算

tips：每个技术点都值得优学优写：12期

好文推荐：

约2万字-Vue源码解读汇总篇(续更)

复盘基于进阶图的30+前端常用知识点

写在前面

从前偶尔也敢胡吹一下，没有搞不定的样式，自己写的样式还好一些，现在是真不敢胡说了。 样式之复杂，难以想象，本文再梳理一下有关样式规则。

11 种样式选择器

• 通配符选择器，* 是通配符，表示其下的样式对所有元素生效，但通配符的优先级较低。
• id选择器，例如 #container
• 类选择器，例如 .box
• 标签选择器(类型选择器)，例如 div span p 等元素标签，直接以标签名称作为样式选择器
• 后代选择器，有层级关系的叠加样式选择器，是样式选择器的一种组合使用，例如 div p
• 子选择器，例如 ul>li 或 div>p，对 ul 直接的子元素 li 设置样式，对 div 的直接子元素 p 设置样式。
• 伪类选择器，例如 a:hover，当鼠标悬浮于 a 标签时的样式。
• 伪元素选择器，例如常见的 ::before 和 ::after，单冒号写法也被现代浏览器支持(那是css2的语法)。
• 相邻兄弟选择器，例如 img + p，样式将对 img 图片后面紧跟着的 p 段落生效。
• 兄弟选择器，A~B 作用于 A 元素之后所有同层级 B 元素。
• 属性选择器，通过已经存在的属性名或属性值匹配元素，例如 a[href="https://example.org"] 或 a[title]。

样式优先级是如何计算的？

当同一个元素有多个声明的时候，优先级才会有意义。因为每一个直接作用于元素的 CSS 规则总是会接管/覆盖(take over)该元素从祖先元素继承而来的规则。

下面列表中，选择器类型的优先级是递增的：

• 1.类型选择器(标签选择器)(例如，h1)和伪元素(例如，::before)
• 2.类选择器 (例如，.example)，属性选择器(例如，[type="radio"])和伪类(例如，:hover)

• 3.ID 选择器(例如，#example)。

• 嵌套组合选择器 多种选择器嵌套组合的优先级，往往比单一的样式选择器优先级更高。 例如 #id > div > p{} 的优先级会比 p{} 和 div > p{} 的优先级更高。

• 内联样式 给元素添加的内联样式 (例如，style="font-weight:bold") 几乎总会覆盖外部样式表的任何样式 ， 因此可看作是具有更高的优先级。

• !important 当在一个样式声明中使用一个 !important 规则时，此声明将覆盖任何其他声明。 当然 !important 可以覆盖 !important，此时需要比较权重。

• 具体的优先级权重规则略显复杂： 一个选择器的优先级可以说是由四个部分相加 (分量)，可以认为是个十百千 — 四位数的四个位数：

千位： 如果声明在 style 的属性(内联样式)则该位得一分。这样的声明没有选择器，所以它得分总是1000。 百位： 选择器中包含ID选择器则该位得一分。 十位： 选择器中包含类选择器、属性选择器或者伪类则该位得一分。 个位：选择器中包含元素、伪元素选择器则该位得一分。

下面是一个示例表：

| 选择器 | 千位 | 百位 | 十位 | 个位 | 优先级 | |-----------------------------------------|-----|------|-----|------|------| | h1 | 0 | 0 | 0 | 1 | 0001 | | h1 + p::first-letter | 0 | 0 | 0 | 3 | 0003 | | li > a[href*="en-US"] > .inline-warning | 0 | 0 | 2 | 2 | 0022 | | #identifier | 0 | 1 | 0 | 0 | 0100 | | 内联样式 | 1 | 0 | 0 | 0 | 1000 |

写在后面

tips：可比条件下，写在后面优先级高于写在前面的。

tips：可比条件下，同为载入样式，后面载入的优先级更高。

tips：可比条件下，@import 引用的样式，权重小于 link 引入的样式。