选择器与层叠

选择器类型（常见）

类型	示例	备注
类型	div、p	覆盖面广，慎用单独标签选择器
类	.btn	首选，可复用
ID	#header	唯一性，优先级高，少用
属性	[type="text"]	表单、无障碍场景常用
伪类	:hover、:nth-child()	交互与列表
伪元素	::before、::placeholder	装饰与首行等

组合选择器：后代 A B、子 A > B、相邻兄弟 A + B、通用兄弟 A ~ B。

---

优先级（特异性）

粗略规律：内联样式 > #id > 类 / 属性 / 伪类 > 标签 / 伪元素；同等条件下 后写的覆盖先写的（同层叠顺序内）。

!important 会打断常规比较，仅建议在覆盖第三方临时样式等场景少量使用。

---

继承

部分属性（如 color、font-size、line-height）默认继承自父元素；盒模型相关（width、margin、border 等）默认不继承。

可用 inherit、initial、unset、revert 控制继承行为。

/* 
inherit：我要继承父
initial：我要规范默认
unset：能继承就继承，不能就默认
revert：我要浏览器默认样式 
*/

.child {
  color: inherit; /* 继承父的颜色 */
  margin: inherit; /* 本来不继承，强行继承父的 margin */
}

---

简要建议

• 优先 类选择器 控制样式，降低特异性战争。
• 结构分层：重置 / 变量 → 布局组件 → 业务组件 → 页面，见 07 中的模块划分思路。