优先级由四部分计算：内联1000、ID100、类/属性/伪类10、标签/伪元素1，!important最高但慎用，继承属性如color可控制，避免深层嵌套和滥用ID以减少冲突。
CSS 选择器的优先级和继承关系是样式渲染的核心机制，理解它们有助于避免样式冲突并写出更可控的代码。
选择器优先级如何计算
当多个规则作用于同一个元素时，浏览器通过优先级决定哪个样式生效。优先级由四部分组成（可类比为四位数比较）：
- 内联样式：如 style="..."，优先级最高，记为 1000
- ID 选择器：如 #header，每个 ID 算 100
- 类、属性、伪类：如 .class、[type="text"]、:hover，每个算 10
- 标签和伪元素：如 div、::before，每个算 1
例如：
#nav .link:hover { color: red; } → 100 + 10 + 10 = 120body header nav a { color: blue; } → 1 + 1 + 1 + 1 = 4
前者优先级更高，样式胜出。
立即学习“前端免费学习笔记（深入）”；
!important 的特殊地位
在声明后加 !important 可提升优先级，高于所有普通规则（包括内联样式），但应谨慎使用。
规则：!important 声明之间仍按选择器优先级比较，若优先级相同，则后者覆盖前者。
建议只在调试或第三方样式覆盖时临时使用，避免滥用导致维护困难。
继承样式的处理方式
某些 CSS 属性会自动从父元素继承，如 color、font-size、line-height 等；而 border、margin、padding 等不会继承。
控制继承的行为可通过以下关键字：
- inherit：强制继承父元素的值
- initial：使用属性的默认值
- unset：有继承则继承，无则用默认值
- revert：回到浏览器或用户代理的原始设定
例如：
.child { color: inherit; }.button { margin: initial; }
避免优先级混乱的实践建议
写 CSS 时保持选择器简洁，能减少优先级冲突：
- 少用 ID 选择器，多用类名
- 避免深层嵌套，如 .a .b .c .d {}
- 统一命名规范（如 BEM）提升可维护性
- 重置不需要的继承：* { all: unset; } 可用于组件隔离
基本上就这些。掌握优先级计算和继承逻辑，能更精准地控制页面样式表现。
