css样式层叠规则详解

当多个 CSS 规则同时作用于同一个 HTML 元素时，就会涉及到 CSS 样式的层叠。而当出现了冲突时，就需要根据层叠规则来确定哪个样式会被最终应用到元素上。以下是 CSS 样式层叠规则的详解。

1. 权重 Specificity

当一个元素被多个 CSS 规则选择到时，就需要根据 Specificity 权重来决定哪一条样式会被优先应用。CSS 的 Specificity 权重由四个值组成，分别是：

• 行内样式的权重为 1000
• ID 选择器的权重为 100
• 类选择器和属性选择器的权重为 10
• 标签选择器或伪类选择器的权重为 1

可以通过计算选择器中每个选择器的 Specificity 来确定总权重，权重越高的样式将被首先配用。

以下是一个用于演示 Specificity 权重的示例：

/* 行内样式为1000*/
p {
  color: red;
}

/* 类选择器为10*/
.my-class {
  color: blue;
}

/* ID 选择器为100*/
#my-id {
  color: green;
}

/* 后面的规则权重等于红色的样式，因为选择器特别指定 */
p.my-class#my-id {
  color: orange;
}

此时，HTML 元素应用的样式是 orange，这是因为 p.my-class#my-id 的 Specificity 计算值为 1(标签选择器) + 10(类选择器) + 100(ID选择器)，所以它的权重比其他规则更大。

2. 书写顺序

CSS 样式的书写顺序是有影响的。如果多个样式具有相同的 Specificity 权重，那么按照它们所出现的顺序来解决。

以下是一个用于演示书写顺序的示例：

p {
  color: red;
  color: blue;
}

此时，HTML 元素应用的颜色值是 blue，这是因为蓝色的样式最后出现。

3. 继承

CSS 样式的继承是指某个元素中设置的某个属性会被其子元素继承。但并非所有属性都能被继承，例如背景色就不能被继承。

以下是一个用于演示继承的示例：

/* 设置了所有 p 元素的 color 属性 */
p {
  color: red;
}

/* b 元素继承了 p 元素的父元素的 color 属性 */
p b {
  color: inherit;
}

此时，b 元素继承了父元素 p 的颜色值 red。

通过掌握 CSS 样式层叠规则，你可以更好地编写样式，实现目标页面效果。