样式优先级和特异性

---

规则集

CSS规则集（Rule Set）是CSS语言的核心组成部分，它定义了如何格式化HTML文档中的特定元素。
规则集由选择器和声明块组成，是控制网页样式的基本单位。

选择器

选择器类型	语法示例	作用描述	优先级权重（数值）
元素选择器	div	选择所有指定 HTML 标签的元素（如所有 <div>）。	1
类选择器	.class-name	选择所有具有指定类名的元素（如 <div class="class-name">）。	10
ID 选择器	#id-name	选择具有指定 ID 的唯一元素（如 <div id="id-name">）。	100
属性选择器	[type="text"]	选择具有指定属性和值的元素（如 <input type="text">）。	10
伪类选择器	:hover	选择元素的特定状态（如鼠标悬停时的状态）。	10
伪元素选择器	::before	选择元素的特定部分（如在元素前插入内容）。	1
通配符选择器	*	选择页面中的所有元素。	0
后代选择器	div p	选择某元素内部的所有指定后代元素（如 <div> 内的所有 <p>）。	权重累加（如 1+1）
子元素选择器	div > p	选择某元素的直接子元素（如 <div> 的直接子元素 <p>）。	权重累加
相邻兄弟选择器	div + p	选择紧接在某元素后的第一个兄弟元素（如 <div> 后的第一个 <p>）。	权重累加
通用兄弟选择器	div ~ p	选择某元素后的所有兄弟元素（如 <div> 后的所有 <p>）。	权重累加
群组选择器	div, .class, #id	同时选择多个元素（如所有 <div>、类名 .class 和 ID #id 的元素）。	独立计算，取最高值
内联样式	<div style="color: red">	直接在 HTML 标签内写的样式。	1000
!important	color: red !important;	强制覆盖其他样式规则（慎用）。	优先级最高

伪类和伪元素的区别

伪类（Pseudo-class）：
用于选择元素的特定状态或条件
例如用户交互（悬停、点击）或文档结构（第一个子元素）。
它不创建新元素，而是对现有元素的补充。
示例：:hover、:active、:nth-child()

伪元素（Pseudo-element）：
用于创建不在DOM树中的虚拟元素，并为其添加样式。
它模拟了一个新的元素，如首字母或前后插入内容。
示例：::before、::first-line、::selection

特异性和优先级

当多个规则集应用于同一个元素时，CSS通过**特异性（Specificity）和优先级（Priority）**决定哪个规则生效。
当特异性相同时，后定义的规则会覆盖先定义的规则。

特异性为不同选择器的权重值
优先级为从高到底的优先顺序

• 内联样式（HTML 元素上的 style） 每个加 1000 分
• ID 选择器（#id） 每个加 100 分
• 类选择器、属性选择器、伪类选择器（.class、[attr=value]、:hover）
  每个加 10 分
• 元素选择器和伪元素选择器（div、::before）
  每个加 1 分
• 通配符选择器、后代选择器、子选择器等（*、div p、div > p）

优先级相同，后出现的样式生效

高级规则集特性

@规则

• @import
• @meida
• @keyframes

自定义属性

:root {
  --main-color: #06c;
  --padding: 15px;
}

.element {
  color: var(--main-color);
  padding: var(--padding);
}

Related notes

• CSS MOC