谁不爱层叠：CSS 层叠及优先级指南

当涉及到 CSS 时，"层叠"这个词经常出现。它指的是将来自不同源的样式属性值组合成一个单一的、应用于 HTML 元素的最终值的算法。

要了解 CSS 层叠，您需要熟悉以下概念：

• 来源 ：样式的来源可以是：
  • 用户代理样式表 (UA)
  • 用户样式表 (US)
  • 链接样式表
  • 内联样式
• 专有性 ：专有性是一个值，它确定哪条规则在样式计算时具有更高的优先级。专有性越高，优先级越高。
• 重要性 ：重要性是另一个值，它确定哪条规则在样式计算时具有更高的优先级。重要性越高，优先级越高。

CSS 层叠规则

CSS 层叠规则确定了当多个规则应用于同一个元素时，哪个规则的属性值将最终应用。层叠规则如下：

1. 来源顺序 ：样式表的来源决定了它们的优先级。UA 样式表具有最低的优先级，其次是 US 样式表，然后是链接样式表，最后是内联样式。
2. 专有性 ：如果两个规则来自相同的来源，则具有更高专有性的规则具有更高的优先级。专有性由以下因素确定：
   • 元素类型 ：元素类型越具体，专有性越高。例如，h1 元素比 div 元素具有更高的专有性。
   • 类选择器 ：类选择器比 ID 选择器具有更高的专有性。例如，.my-class 比 #my-id 具有更高的专有性。
   • ID 选择器 ：ID 选择器比元素选择器具有更高的专有性。例如，#my-id 比 div 具有更高的专有性。
   • 内联样式 ：内联样式比任何其他类型的选择器都具有更高的专有性。
3. 重要性 ：如果两个规则具有相同的来源和专有性，则具有更高重要性的规则具有更高的优先级。重要性由 !important 声明指定。

继承

继承是一种机制，它允许元素从其父元素继承样式属性。例如，如果一个元素具有 color 属性，则其子元素也将继承该 color 属性，除非子元素具有自己的 color 属性。

继承对于创建一致的样式非常重要。它可以帮助您避免为每个元素重复设置相同的样式属性。

特殊性

特殊性是一个值，它确定哪条规则在样式计算时具有更高的优先级。特殊性越高，优先级越高。特殊性由以下因素确定：

• 元素类型 ：元素类型越具体，特殊性越高。例如，h1 元素比 div 元素具有更高的特殊性。
• 类选择器 ：类选择器比 ID 选择器具有更高的特殊性。例如，.my-class 比 #my-id 具有更高的特殊性。
• ID 选择器 ：ID 选择器比元素选择器具有更高的特殊性。例如，#my-id 比 div 具有更高的特殊性。
• 内联样式 ：内联样式比任何其他类型的选择器都具有更高的特殊性。

总结

CSS 层叠、继承和特殊性对于创建一致的样式非常重要。通过理解这些概念，您可以更好地控制样式的显示效果。