🎨 一、CSS 基础与选择器（2025 重点版）

---

1️⃣ CSS 基础语法与规则结构

标准结构：

selector {
  property: value;
}

注意细节：

• 每个声明以分号 ; 结束。

• 属性名与值之间用冒号 :。

• 可以用多重选择器：

  h1, h2, h3 { font-weight: 600; }

---

2️⃣ 选择器优先级（Specificity）

计算规则：

类型	示例	权重值
内联样式	style="color:red"	1000
ID	#header	100
类 / 伪类 / 属性选择器	.nav, :hover, [type=text]	10
元素 / 伪元素	div, p::before	1
通配符或继承	*, inherit	0

层叠规则（Cascade）：

1. 优先级高者生效。
2. 权重相同，后定义覆盖前定义。
3. !important 可强制覆盖（谨慎使用）。

---

3️⃣ 继承（Inheritance）

• 一些属性会自动继承（如 font-family, color）。

• 非继承属性（如 margin, border）不会自动继承。

• 可显式指定：

  color: inherit;
  margin: initial;

---

4️⃣ 常用选择器种类（2025 年前端需熟悉）

类型	示例	说明
元素选择器	p	匹配所有 <p> 元素
类选择器	.btn	匹配 class="btn"
ID选择器	#main	匹配 id="main"
属性选择器	[type="text"], [href^="https"]	匹配属性与值
伪类选择器	:hover, :focus, :nth-child(2n)	特定状态
伪元素选择器	::before, ::after	插入虚拟内容
组合选择器	.nav a:hover	层级关系选择
群组选择器	h1, h2, h3	多个元素共享样式

---

5️⃣ 新选择器（现代 CSS 特性）

(1) :is() 简化多重组合

:is(h1, h2, h3) { color: #333; }

相当于 h1, h2, h3 {}，但更紧凑。

(2) :where() 与 :is() 区别

• :where() 权重始终为 0。
• 适合做“安全默认样式”。

:where(article p) {
  line-height: 1.8;
}

(3) :has() —— 父选择器革命性增强

/* 选中包含 .error 的 form */
form:has(.error) {
  border-color: red;
}

• 可检测子元素、后代或相邻元素存在。
• 兼容 Chrome 105+、Safari 15.4+、Firefox 121+。

(4) :not() 过滤选择

button:not(.primary) {
  background: #eee;
}

---

6️⃣ 通配与组合器

选择器	示例	说明
后代选择器	div p	div 内所有 p
子代选择器	div > p	仅直接子元素
相邻兄弟	h2 + p	紧跟在 h2 后的 p
一般兄弟	h2 ~ p	同层级、在后面的所有 p
通配符	* { box-sizing: border-box; }	全局匹配

---

7️⃣ 伪类重点（状态控制）

伪类	用途
:hover	鼠标悬停
:focus	元素聚焦
:active	点击中
:checked	复选框选中
:disabled	禁用状态
:focus-visible	仅键盘聚焦时显示
:target	锚点匹配

---

8️⃣ 伪元素重点（装饰控制）

伪元素	用途
::before, ::after	插入内容（常用于按钮特效、修饰线）
::first-line, ::first-letter	特定文本部分样式
::selection	选中文本样式
::marker	列表项目符号样式

---

9️⃣ 层叠与来源（Cascade Layers）

@layer base, components, utilities;

@layer base {
  h1 { color: black; }
}
@layer components {
  .btn { color: blue; }
}

• 后定义的 layer 会覆盖前面 layer。
• 用于管理大型项目中样式冲突。
• 常与 @import、Tailwind 一起使用。

---

✅ 二、开发 Checklist

检查项	要求
🧱 层叠逻辑清晰	避免无意覆盖、善用层叠与层次
🎯 选择器粒度合理	避免过度嵌套或使用高权重选择器
🧩 新选择器掌握	会用 :is(), :where(), :has()
📚 继承理解透彻	正确利用 inherit, initial, unset
🪶 伪类与伪元素熟悉	hover、focus、checked、before/after
🧠 优先级控制	熟悉权重算法，谨慎使用 !important
⚙️ 层叠管理	考虑使用 @layer 组织样式文件
🧼 命名规范	使用 BEM 或 Utility 类统一命名
🔍 可读性检查	简洁、结构清晰、避免重复定义

---

是否希望我继续整理下一章 《CSS 盒模型与布局（Flexbox + Grid）》？ 这一章是前端开发中最重要的部分之一，我可以帮你总结核心知识、细节陷阱、常见布局写法与开发 checklist。