CSS选择器

CSS 规则集由两个主要的部分构成：选择器 和 声明块组成；

• 选择器：选择器指向需要改变样式的 HTML 元素，通过选择器，我们知道是给那个元素添加样式。
• 声明块：包含一条或多条声明，每条声明用分号 ; 结束，声明大括号{}括起来；

选择器的种类

• ID选择器（#box）

• 类选择器（.box）

• 伪类选择器（:link）

• 伪元素选择器（::before）

• 属性选择器（[name=input]）

• 标签选择器（div）

• 后代选择器（#box p）

• 子选择器（#box>p）

• 相邻选择器（.box+.p）

• 群组选择器（div,p）

• 层次选择器（div~p）

优先级

选择器的优先级决定了当多个规则应用于同一个元素时，哪一个规则会被应用。CSS选择器的优先级是通过特定的规则来决定的，这些规则被称为特异性（Specificity） 和 重要性（Importance） 。

特异性

特异性是用来确定哪些CSS规则应该被应用的算法。它基于选择器中不同类型的选择器的数量。特异性可以分为以下四类，每一类都有一个基础值：

• 内联样式（在元素内部的style属性） - 基础值：1000
• ID选择器（如 #box） - 基础值：100
• 类选择器、伪类选择器（如 .className, :hover）、属性选择器（如 [type="text"]） - 基础值：10
• 标签选择器（如 h1, p）、伪元素选择器（如 ::before） - 基础值：1
• 通用选择器（如 *） - 基础值：0，它们可以与其他选择器组合，但不直接增加特异性。

// 优先级记为 0113
#nav-global > ul > li > a.nav-link

比较规则

• 从左往右依次进行比较，较大者优先级更高。
• 如果相等，则继续往右移动一位进行比较。
• 如果4位全部相等，则后面声明的规则将覆盖先前的规则。

重要性

允许使用!important规则来覆盖其他所有规则。当一个声明被标记为!important时，它将覆盖所有其他具有相同或更低特异性的声明。过度使用!important可能会导致样式表难以维护，因此建议谨慎使用。