在 CSS 中,层叠(也称“级联”)指的是将多个样式应用到同一元素时的优先级规则。
当多条 CSS 规则都适用于同一个元素时,浏览器会根据层叠顺序和选择器权重来决定哪个样式应用。在 CSS 中,层叠顺序是指 CSS 规则的优先级别,而选择器权重则是指选择器特定性。
层叠顺序是指 CSS 中规则的优先级别。通常情况下,后定义的样式会优先于先定义的样式。也就是说,最后的样式会被优先应用到元素上。
p { color: red; } p { color: blue; }
在上面的示例中,最后一个样式color: blue;
会被应用到所有的<p>
元素上,因为它们处于后面。
选择器特定性是另一个决定样式层叠顺序的因素。在 CSS 中,选择器特定性是用来确定多个选择器应用于同一元素时的优先级别。它是由选择器中 ID、类、伪类和元素类型选择器之间的数量和组合来计算的。
以下是 CSS 选择器特定性的计算方法:
- 对于每个 ID 选择器,将其特定性值加 100,
- 对于每个类、属性或伪类选择器,将其特定性值加 10,
- 对于每个元素或伪元素选择器,将其特定性值加 1,
- 特定性值越高的样式将优先应用于元素上。
例如:
#myDiv { color: red; } p#myDiv { color: blue; }
在上面的示例中,ID 选择器的特定性值为 100,元素类型选择器的特定性值为 1。因此,最后的样式是color: blue;
,因为它的特定性值更高。
在编写 CSS 样式时,应该尽量避免使用 !important 来强制覆盖样式。它会使代码变得难以维护。相反,应该尽量使用选择器特定性和层叠顺序来管理样式的应用。