CSS（层叠样式表）是构建网页视觉表现的核心技术之一。在实际开发中，我们经常会遇到多个CSS规则可能同时应用到同一个元素上的情况。这时，理解CSS的优先级规则就显得尤为重要。本文将详细介绍CSS样式表的优先级，帮助开发者更好地控制样式的应用。
什么是CSS优先级？
CSS优先级是指当多个CSS规则匹配同一个元素时，决定哪个规则被应用的规则。CSS优先级主要取决于两个因素：选择器的特异性（Specificity）和来源（Source）。
选择器的特异性
特异性是CSS中一个重要的概念，它决定了CSS规则的优先级。特异性由四个组成部分的值决定：
- 内联样式：内联样式（直接在HTML元素上使用
style属性定义的样式）具有最高的特异性，其值为1,0,0,0。 - ID选择器：每个ID选择器的特异性值为0,1,0,0。
- 类选择器、属性选择器、伪类：这些选择器的特异性值为0,0,1,0。
- 元素选择器、伪元素：元素选择器和伪元素的特异性值为0,0,0,1。
特异性的四个值按照从左到右的顺序组合起来，形成特异性的四元组。在比较特异性时，我们从左到右依次比较这四个值，数值大的优先级更高。
来源的优先级
来源的优先级是指不同来源的CSS规则的优先级。通常，以下几种来源的优先级从高到低依次为：
- 用户代理样式（浏览器默认样式）
- 外部样式表
- 内部样式（在HTML文档的
<style>标签中定义的样式） - 内联样式（在HTML元素的
style属性中定义的样式）
优先级的实际应用
当多个规则具有相同的特异性时，CSS将根据来源的优先级来决定哪个规则被应用。如果来源也相同，那么最后定义的规则将覆盖先前定义的规则。
示例
考虑以下CSS规则：
/* 规则1: 来自外部样式表 */ h1 { color: blue; } /* 规则2: 来自内部样式 */ #main-title { color: red; } /* 规则3: 来自内联样式 */ <h1 id="main-title" style="color: green;"> Hello, World! </h1>
在这个例子中，<h1>元素同时被三个规则选中。根据特异性和来源的优先级：
- 规则1的特异性为(0,0,0,1)，来源优先级为3。
- 规则2的特异性为(0,1,0,0)，来源优先级为2。
- 规则3的特异性为(1,0,0,0)，来源优先级为4。
由于规则3具有最高的来源优先级和特异性，因此<h1>元素的文本颜色将是绿色。
结语
掌握CSS样式表的优先级对于前端开发者来说至关重要。它不仅影响着样式的最终表现，也是解决样式冲突的关键。希望本文能帮助你更深入地理解CSS优先级，让你在开发过程中能够更加自信地控制样式的应用。
