扎实派|11种样式选择器与样式优先级计算

---

扎实派|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 引入的样式。