CSS 选择器优先级的故事，你真的讲对了吗？
2024-02-05 17:45:37
CSS 选择器优先级是一个经常被讨论的话题，但它也是一个经常被误解的话题。在本文中，我们将深入探讨 CSS 选择器优先级的概念，包括特殊性和权重，以及它们在决定样式应用顺序时的作用。此外，我们还将讨论继承和层叠上下文对 CSS 选择器优先级的潜在影响。
了解特殊性和权重
特殊性和权重是决定 CSS 选择器优先级的两个关键因素。特殊性是指选择器与 HTML 元素的匹配程度，而权重则是一个数值，用于比较具有相同特殊性的选择器。
特殊性由以下因素决定：
- 元素类型： HTML 元素的类型，如
<div>、<p>或<a>。 - 类和 ID 选择器： 类和 ID 选择器的数量。
- 通用选择器： 通用选择器（*）的数量。
权重由以下因素决定：
- 内联样式： 内联样式的权重最高，为 1000。
- ID 选择器： ID 选择器的权重为 100。
- 类选择器、伪类选择器和属性选择器： 类选择器、伪类选择器和属性选择器的权重为 10。
- 元素类型选择器： 元素类型选择器的权重为 1。
如何计算选择器优先级
选择器优先级是通过将特殊性和权重相加来计算的。具有较高优先级的选择器将覆盖具有较低优先级的选择器。
例如，以下选择器具有较高的优先级：
#my-id {
color: red;
}
这个选择器具有以下特殊性和权重：
- 特殊性：1 (ID 选择器)
- 权重：100 (ID 选择器)
- 优先级：101
以下选择器具有较低的优先级：
.my-class {
color: blue;
}
这个选择器具有以下特殊性和权重：
- 特殊性：1 (类选择器)
- 权重：10 (类选择器)
- 优先级：11
因此，具有较高优先级的 #my-id 选择器将覆盖具有较低优先级的 .my-class 选择器，并且 #my-id 元素将以红色显示。
继承和层叠上下文
继承和层叠上下文也会影响 CSS 选择器优先级。
继承
继承是指将父元素的样式应用于子元素。例如，如果一个 <div> 元素具有 color: red; 的样式，那么该 <div> 元素的所有子元素都将继承红色文本颜色。
继承也会影响 CSS 选择器优先级。如果一个选择器匹配一个继承了样式的元素，那么该选择器的优先级将比匹配未继承样式的元素的优先级高。
例如，以下选择器具有较高的优先级：
div p {
color: red;
}
这个选择器匹配所有位于具有 color: red; 样式的 <div> 元素内的 <p> 元素。由于 <p> 元素继承了 <div> 元素的样式，因此该选择器的优先级比以下选择器的优先级高：
p {
color: blue;
}
这个选择器匹配所有 <p> 元素，无论其父元素是否有样式。因此，具有较高优先级的 div p 选择器将覆盖具有较低优先级的 p 选择器，并且位于具有 color: red; 样式的 <div> 元素内的所有 <p> 元素都将以红色显示。
层叠上下文
层叠上下文是指一个隔离的区域，其中元素的样式独立于其父元素的样式。层叠上下文由以下元素创建：
<html>元素<body>元素<iframe>元素<object>元素<embed>元素- 具有
position: absolute;或position: fixed;样式的元素
层叠上下文也会影响 CSS 选择器优先级。如果一个选择器匹配一个位于层叠上下文中的元素，那么该选择器的优先级将比匹配未位于层叠上下文中的元素的优先级高。
例如，以下选择器具有较高的优先级：
#my-id {
color: red;
}
这个选择器匹配具有 id="my-id" 的元素，无论该元素位于哪个层叠上下文中。由于该元素位于层叠上下文中，因此该选择器的优先级比以下选择器的优先级高：
p {
color: blue;
}
这个选择器匹配所有 <p> 元素，无论其父元素是否有样式。因此，具有较高优先级的 #my-id 选择器将覆盖具有较低优先级的 p 选择器，并且具有 id="my-id" 的元素将以红色显示，即使该元素位于 <p> 元素内。
总结
CSS 选择器优先级是一个复杂的话题，但它也是一个非常重要的概念。通过理解特殊性、权重、继承和层叠上下文的概念，您可以更有效地使用 CSS 来控制元素的外观。
