CSS 继承、层叠和特殊性：全方位掌握 CSS

2023-10-09 16:22:05

CSS的继承：样式的层级传递

CSS继承是一种允许样式从父元素传递给子元素的机制。这意味着，当您为某个元素设置样式时，其子元素也会继承这些样式，除非它们被覆盖。

例如，以下CSS代码将为页面中的所有  元素设置一个红色文本样式：

p {
  color: red;
}

由于CSS的继承性，所有  元素中的文本都将显示为红色，即使您没有为它们单独设置样式。

继承性对于创建一致的样式非常有用，它可以帮助您避免为每个元素重复设置相同的样式。它还允许您轻松地更改父元素的样式，从而影响其所有子元素的样式。

CSS的层叠：样式的优先级之争

CSS层叠是一种当多个样式规则应用于同一个元素时，决定哪个样式规则生效的机制。层叠的优先级由以下几个因素决定：

特殊性： 特殊性是衡量CSS选择器匹配元素的具体程度的指标。特殊性越高，选择器匹配元素就越具体，其样式规则的优先级也就越高。
来源： CSS样式规则可以来自不同的来源，包括浏览器默认样式、用户样式表和外部样式表。外部样式表的优先级高于用户样式表，用户样式表的优先级高于浏览器默认样式。
顺序： 当多个样式规则具有相同的特殊性和来源时，则根据它们在样式表中的顺序来确定优先级。后出现的样式规则的优先级更高。

以下是一个例子，来说明层叠是如何工作的：

p {
  color: red;
}

.special {
  color: blue;
}

#unique {
  color: green;
}

在这个例子中， 选择器具有最低的特殊性，因此它的样式规则被覆盖。.special 选择器具有更高的特殊性，因此它的样式规则被应用到具有 special 类的  元素上。#unique 选择器具有最高的特殊性，因此它的样式规则被应用到具有 unique id 的  元素上。