1. 介绍
CSS（层叠样式表）是用于定义网页样式和布局的语言。在编写CSS样式时，可能会出现多个规则同时应用于同一个元素的情况，这时就需要了解CSS样式的优先级。CSS的优先级由权重和层叠规则决定，本文将详细介绍这两个概念。
2. 权重
CSS样式表中的每个选择器都有一个权重值，用于决定哪个样式规则具有更高的优先级。
权重由四个部分组成：
内联样式：指在HTML元素内部通过style属性直接定义的样式，具有最高优先级。
id选择器：指通过id属性选择元素，通过#标识符来表示，权重为100。
类选择器、属性选择器和伪类选择器：指通过类名、属性名或伪类来选择元素，通过.、[]或:来表示，权重为10。
元素选择器和伪元素选择器：指通过元素名或伪元素来选择元素，权重为1。
对于同一个元素，如果存在多个选择器定义了样式，那么权重值高的样式将覆盖权重值低的样式。
3. 层叠规则
除了权重之外，CSS还有一套层叠规则来决定样式的优先级。
层叠规则按照以下顺序决定样式的优先级：
重要性（!important）：通过在样式声明后加上!important来表示该样式具有最高优先级。
内联样式：内联样式的优先级高于其他选择器定义的样式。
权重：具有更高权重的样式优先级更高。
源代码顺序：如果以上规则无法决定优先级，那么根据样式在CSS文件中的先后顺序来决定。
通过权重和层叠规则，我们可以准确地控制样式的优先级，确保页面显示符合预期。
4. 示例
让我们通过一个示例来说明权重和层叠规则的运用。
/* 内联样式 */
p {
color: red;
}
/* id选择器 */
#myParagraph {
color: blue;
}
/* 类选择器 */
.myClass {
color: green;
}
/* 元素选择器 */
div {
color: yellow;
}
在上述示例中，假设我们有以下HTML代码：
<div id="myParagraph" class="myClass">
<p>Hello, World!</p>
</div>
根据权重和层叠规则，最终该段落的文字颜色将是蓝色，因为内联样式的权重值最高，而id选择器具有比类选择器和元素选择器更高的权重值。
5. 总结
通过权重和层叠规则，CSS样式表可以灵活地控制元素的样式。在编写样式时，需要注意选择器的权重，以及利用层叠规则来调整样式的优先级，以确保页面显示符合预期。
权重和层叠规则是掌握CSS样式优先级的重要概念，理解它们能够帮助开发人员更好地控制网页的外观和布局。