一、引言
在之前梳理 CSS 选择器的文章（CSS 回顾 - CSS 选择器详解）中，我们对 CSS 选择器有了全面的认识。此刻，不妨思考这样一个问题：倘若众多不同类型的选择器均针对 h1 标签设定样式，究竟会呈现何种结果？带着这份疑惑，让我们一同深入探究 CSS 样式优先级的规则奥秘。
二、样式优先级的核心意义
当我们构建复杂的网页布局和设计丰富的交互界面时，样式冲突是难以避免的问题。不同的 CSS 选择器可能会同时作用于一个元素，若没有明确的优先级规则，样式的应用将变得混乱无序。当多个选择器针对同一个元素的同一个属性进行不同的样式设置时，CSS 选择器优先级规则就像一位公正的裁判，决定着最终的样式呈现。
三、基础优先级规则
- 重要性声明（!important）：使用
!important的样式优先级最高，能无视其他规则，但应谨慎用，因其会破坏常规层级，致样式难调试维护，如p { color: red!important; }。 - 内联样式：写在 HTML 元素
style属性中，优先级仅次于!important，与 HTML 耦合紧，不利于复用管理，像<p style="color: blue;">。 - ID 选择器：无
!important和内联样式冲突时优先级高，定位独特元素有效，但过度依赖会使样式调整复杂，如#header { background-color: gray; }。 - 类选择器、属性选择器与伪类选择器：三者优先级相同且低于 ID 选择器。类选择器可复用，属性选择器依属性选元素，伪类选择器针对特定状态。如
.highlight、[type="text"]、a:hover，冲突时依样式表顺序等综合定优先级。 - 元素选择器：基于 HTML 标签名，优先级低，易被覆盖，如
p { line-height: 1.5; }。 - 通配符选择器与继承样式：通配符选所有元素，常用于全局重置，易冲突且可能影响性能，如
* { margin: 0; padding: 0; }；子元素继承父元素部分样式，自身定义相同属性样式可覆盖，如父设font-family，子可改。
四、优先级计算的规则
4.1 选择器间计算规则
- !important拥有最高的优先级（谨慎使用）
- 内联样式计算值为
1000 - ID 选择器计算值为
100 - 类、属性、结构、伪类选择器计算值为
10 - 标签选择器计算值为
1 - 通配符选择器计算值为
0
计算值的作用就是为了我们更好的去计算样式的权重大小，权重大的样式就会生效。请看下面的实例：
页面结构：
<div id="box">
<ul class="list">
<li><span>标签</span></li>
</ul>
</div>
样式示例：
/* 基础样式 权重：类 + 后代 + 标签 = 21 */
.list li {
background-color: red;
}
/* 第一种情况 权重：属性 + 后代 + 标签 = 21 */
[class] li {
/* 生效：权重相同则后设置的会覆盖 */
background-color: yellow;
}
/* 第二种情况 权重：标签 + 类 + 后代 + 标签 = 22 */
ul.list li {
/* 生效：增加了一个标签选择器，权重增加 */
background-color: red;
}
注意：慎用!important、内联、ID选择器权重太高不好做样式覆盖。
4.2 样式表的顺序
即便各个选择器拥有各自的计算权重值，但当权重值相同的情况出现时，样式表中的顺序将成为决定胜负的关键因素。即靠后的样式规则将优先生效。在涉及多个 CSS 文件引入的复杂场景中，合理安排样式表的加载顺序显得尤为重要，需精心规划，确保样式的预期效果得以准确实现。
4.3 样式的继承（扩展知识）
在 CSS 的样式世界里，部分样式具备默认的继承特性，宛如家族血脉的传承，父元素设定的某些样式将自然而然地传递给子元素。
4.3.1 文本相关样式
color：这是最常见的继承样式之一。例如，如果在父元素（如<body>）中设置了color: #333;，那么所有子元素（如<p>、<div>内的文本等）默认会继承这个文本颜色。这使得整个页面的文本颜色能够保持一致性，除非子元素有自己的color属性设置来覆盖继承的值。font - family：字体家族也会继承。如果在<html>元素上设置了font - family: Arial, sans - serif;，那么所有后代元素的文本字体都会按照这个设置来显示，除非在某个特定的子元素中重新定义了font - family。font - size：字号同样可以继承。比如，当<body>元素设置了font - size: 16px;，子元素的文本字号默认会继承这个值，当然，也可以在子元素中单独调整字号大小。font - style：如font - style: italic;这种斜体样式会被继承。如果父元素是斜体，子元素的文本也会默认呈现斜体，不过子元素可以通过将font - style设置为normal来取消继承。font - weight：字体粗细属性也能继承。例如，若父元素设置为font - weight: bold;，子元素文本会继承加粗的样式，同样可以在子元素中重新设置该属性来改变样式。line - height：行高属性具有继承性。它用于控制文本行之间的间距，当在父元素中设置了line - height值后，子元素会继承这个间距设置，有助于保持文本排版的一致性。text - align：文本对齐方式（如text - align: center;）会被继承。这在创建居中对齐的文本块或容器时很有用，子元素会继承父元素的对齐方式，当然也可以单独为子元素设置不同的对齐方式。text - indent：首行缩进属性会继承。例如，在<p>元素的父元素中设置了text - indent: 2em;，那么<p>元素的首行文本会默认缩进两个字符宽度。text - transform：包括text - transform: uppercase;（转换为大写）、text - transform: lowercase;（转换为小写）等文本转换方式会被继承。如果父元素设置了文本转换，子元素文本也会进行相同的转换，除非子元素重新定义该属性。letter - spacing：字间距属性是可继承的。它用于调整字符之间的间隔，当在父元素中设置了letter - spacing值后，子元素会继承这个字间距设置。word - spacing：词间距属性同样可以继承。如果父元素设置了word - spacing，子元素会继承这个用于控制单词之间间隔的属性。
4.3.2 列表相关样式
list - style - type：这个属性用于定义列表项的标记类型（如disc、circle、square等用于无序列表，decimal、lower - roman等用于有序列表），它会被继承。如果在<ul>或<ol>的父元素中设置了列表样式类型，子列表会继承这个标记样式。list - style - position：用于确定列表项标记的位置（如inside或outside），它会被继承。这有助于保持列表的一致性，子列表会继承父列表标记的位置设置。
4.3.3 表格相关样式
caption - side：用于指定表格标题的位置（如top或bottom），它会被继承。如果在<table>的父元素中设置了标题位置，子表格会继承这个设置。border - collapse：用于控制表格边框是否合并，它会被继承。当在父表格中设置了border - collapse属性后，子表格会继承这个边框合并的设置，以保持表格样式的一致性。
4.3.4 其他样式
visibility：这个属性用于控制元素是否可见（如visibility: hidden;或visibility: visible;），它会被继承。不过需要注意的是，当一个元素设置为visibility: hidden;时，它虽然不可见，但仍然占据页面空间，而子元素也会继承这种不可见状态，除非子元素重新设置visibility为visible。
五、样式优先级冲突的最佳实践
在实际开发过程中，当多个样式针对同一属性设定，且权重恰好相同，样式优先级冲突便悄然降临，往往导致页面效果偏离预期。为有效规避此类问题，我们可从以下几个方面着力：
- 合理规划选择器：优先用类选择器，避免过度依赖 ID 选择器。如按钮用
.button类设基本样式，可扩展.button-primary等。 - 模块化样式设计：按功能或区域划分样式，模块内用低特异性选择器，如头部菜单用
.header-menu类。 - 利用计算权重技巧：覆盖样式时适当增加权重值，避免过度嵌套，可借助 CSS 预处理器特性，如 Sass 的
&符号。 - 遵循样式表组织规范：控制加载顺序，团队协作建立统一命名和结构规范。
六、总结
CSS 选择器优先级是 CSS 样式设计中一个核心但又复杂的概念。理解内联样式、不同类型选择器的优先级、特异性计算方法、! important规则以及继承对优先级的影响，能够帮助我们更好地控制网页元素的样式。在实际开发中，合理地运用这些规则，避免过度依赖! important，可以创建出清晰、可维护且高质量的 CSS 样式表，让网页的视觉效果更加完美。
