CSS样式由权重和继承决定，权重按内联、ID、类、标签四元组比较，高权重覆盖低权重，!important优先但慎用，可继承属性如color、font等，不可继承的可用inherit强制继承，通过提高选择器具体性、合理排序及命名规范可有效控制样式。
在CSS中，属性的最终表现效果取决于优先级（权重）和继承机制。理解这两者的工作原理，能帮助开发者准确控制样式显示，避免意外覆盖或失效。
权重计算：决定哪个样式生效
CSS通过一套权重系统来判断多个冲突规则中哪一个应被应用。每个选择器都有对应的权重值，由四个层级组成：内联样式、ID选择器、类/属性/伪类、标签/伪元素。
权重按“四元组”形式比较：(内联, ID, 类, 标签)，从左到右逐级对比。
- 内联样式（如 style="..."）：1,0,0,0
- ID选择器（如 #header）：0,1,0,0
- 类、属性选择器、伪类（如 .btn, [type="text"], :hover）：0,0,1,0
- 标签选择器、伪元素（如 div, ::before）：0,0,0,1
- 通用选择器（*）、组合符（+, >, ~, 空格）：0,0,0,0
例如：
立即学习“前端免费学习笔记（深入）”；
#nav .link:hover { color: red; } /* 权重：0,1,2,0 */
div a { color: blue; } /* 权重：0,0,0,2 */
前者权重更高，样式会被采用。
注意：!important 可打破常规权重规则，但需谨慎使用。带有 !important 的声明会优先于普通声明，即使其选择器权重较低。多个 !important 时，仍按权重和源顺序决定。
继承：子元素获取父元素的某些样式
并非所有CSS属性都会继承。文本相关的属性通常可继承，布局类则不会。
常见可继承属性包括：
- color
- font-family, font-size, font-weight
- text-align, line-height
- visibility
常见不可继承属性包括：
- width, height
- margin, padding, border
- position, display, float
- background
可通过 inherit 关键字强制继承：
.child {
border: inherit;
}
也可用 initial 重置为默认值，或 unset 清除设置（继承或默认）。
覆盖方法与最佳实践
当需要覆盖已有样式时，推荐以下方式：
- 提高选择器权重（如增加类名或ID），而非滥用 !important
- 合理组织CSS文件顺序，后定义的同权重规则会覆盖前面的
- 使用更具体的选择器，如 .menu li.active 而非 .active
- 利用BEM等命名规范减少权重竞争
- 调试时使用浏览器开发者工具查看最终计算样式
避免过度嵌套和高权重选择器，保持样式表可维护性。
基本上就这些。掌握权重计算和继承规则，就能更精准地控制页面样式表现。
