CSS样式不是’级联’？-猿码集

什么是CSS样式级联？

CSS（Cascading Style Sheets）是一种用于描述文档样式和布局的语言。它有一个重要的特性被称为“级联”，即CSS样式可以从不同来源应用于同一个HTML元素，而各个样式之间可以相互影响，从而形成最终的呈现效果。

尽管我们习惯性地称CSS样式为“级联”，但实际上CSS样式并不完全遵循传统的级联概念。传统的级联指的是多个操作或过程按照固定的顺序依次进行。而CSS样式的级联是有条件的，具体表现在以下几个方面：

CSS样式中的选择器具有不同的权重，这些权重将决定哪个样式将被应用于元素。当多个样式对同一个元素起作用时，根据权重的规则，优先选择权重较高的样式。


p {
  font-size: 16px;
}
#my-paragraph {
  font-size: 20px;
}

在上面的例子中，对于ID为"my-paragraph"的段落元素，它将应用20px的字体大小，而不是16px，因为ID选择器的权重高于元素选择器。

某些CSS属性具有继承特性，这意味着在父元素上设置的属性值会被子元素继承并应用。这种继承机制可以使得样式在整个文档中生效。


body {
  font-family: Arial, sans-serif;
}
h1 {
  color: red;
}

在上面的例子中，网页中所有的标题都将继承body元素的字体族属性，并且所有的h1标题将具有红色的文本颜色。

CSS样式可以通过多种方式添加到HTML元素中，包括嵌入样式和内联样式。嵌入样式指的是将CSS代码放置在HTML文档的头部head标签内部的style标签中。内联样式是直接在HTML元素的style属性中指定样式。这两种方式的样式会覆盖外部样式表的相应样式。


h2 {
  color: blue;
}
<h2 style="color: red;">这是一个红色的标题</h2>

在上面的例子中，虽然嵌入样式为h2标题指定了蓝色的颜色，但由于内联样式具有更高的权重，所以实际上标题将呈现为红色。

尽管CSS样式具有一定的级联性，但它与传统的级联概念略有不同。CSS样式的级联机制是基于选择器的权重和属性继承的规则。同时，嵌入样式和内联样式也可以覆盖外部样式表。因此，我们在描述CSS样式时可以谨慎使用“级联”这个词，以避免混淆。