瀑布

CSS 播客 - 004：级联广告素材

CSS 代表层叠样式表。 级联是一种用于解决多个 CSS 规则应用于一个 HTML 元素的冲突的算法。 因此，使用以下 CSS 设置样式的按钮文本将显示为蓝色。

button {
  color: red;
}

button {
  color: blue;
}

了解级联算法有助于您了解浏览器如何解决此类冲突。 级联算法分为 4 个不同的阶段。

  1. 位置和显示顺序：CSS 规则的显示顺序
  2. 特异性：一种算法，用于确定哪个 CSS 选择器的匹配度最高
  3. 来源：CSS 出现的顺序和来源，无论是哪种浏览器样式， 浏览器扩展程序中的 CSS，或者您编写的 CSS
  4. 重要性：某些 CSS 规则的权重高于其他规则， 特别是 !important 规则类型

位置和显示顺序

CSS 规则的显示顺序及其显示方式由级联考虑 同时计算冲突解决情况

本课程开头的演示是最直接的定位示例。 有两个规则具有完全相同的选择器， 因此最后一个声明的胜出者

样式可以来自 HTML 网页上的各种来源， 例如 <link> 标记， 嵌入式 <style> 标记； 和内嵌 CSS（如元素的 style 属性中所定义）。

如果您的 HTML 网页顶部有一个包含 CSS 的 <link>， 则另一个包含 CSS 的 <link>：底部的 <link> 的特异性最强。 嵌入的 <style> 元素也会发生同样的情况。 位置越靠下，显示位置越具体。

按钮为蓝色背景， 由 CSS 定义，包含在 <link /> 元素中。 另一个关联的样式表中有将样式设为深色的 CSS 规则 并且会因为其位置较晚而应用。

此排序也适用于嵌入的 <style> 元素。 如果在 <link> 之前声明它们， 关联的样式表的 CSS 将具有最特异性。

<style> 元素在 <head> 中声明， 而 <link /> 元素是在 <body> 中声明的。 这意味着，它比 <style> 元素更具体

如果内嵌 style 属性声明了 CSS，该属性将替换所有其他 CSS， 无论其位置如何，除非声明已定义 !important。

排名也会按照 CSS 规则的顺序应用。 在此示例中，该元素的背景将是紫色，因为 background: purple 是在最后声明的。 由于绿色背景是在紫色背景之前声明的，因此现在被浏览器忽略。

.my-element {
  background: green;
  background: purple;
}

能够为同一属性指定两个值 可以作为一种简单的方法，用于为不支持特定值的浏览器创建后备广告。 在下一个示例中，font-size 被声明了两次。 如果浏览器支持 clamp()， 那么系统将舍弃之前的 font-size 声明。 如果浏览器不支持 clamp()， 遵循初始声明，字体大小将为 1.5rem

.my-element {
  font-size: 1.5rem;
  font-size: clamp(1.5rem, 1rem + 3vw, 2rem);
}
。

检查您的理解情况

测试您对级联的了解程度

如果您的网页上有以下 HTML：

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="/styles.css" />
  </head>
  <body>
    <button>I am a button</button>
    <style>
      button {
        background: pink;
      }
    </style>
  </body>
</html>

styles.css 中有以下 CSS 规则：

button {
  background: yellow;
}

按钮的背景是什么颜色？

粉色
嵌入的 <style> 源比页面中的 <link> 标记中，因此当 button 的特异性相同时， position 才能胜出。
黄色
对于 HTML 文档，系统可能读取了黄色按钮背景 但后来又发现了一条具有相同特异性的更新规则， 此规则不适用于该按钮。

明确性

特异性是一种算法，用于确定哪个 CSS 选择器最为具体。 使用加权或评分系统进行计算。 通过创建更具体的规则 即使与选择器匹配的其他 CSS 稍后出现在 CSS 中，您也可以应用此选择器。

在下一课中，您将详细了解如何计算特异性， 但请记住以下几点将有助于您避免过多的特异性问题。

CSS 将某个类定位到某个元素会使该规则更为具体 因此我们认为应用更为重要 与只定位元素的 CSS 相比 这意味着，对于下面的 CSS， 即使这两个规则都匹配，并且 h1 选择器的规则稍后出现在样式表中，h1 也显示为红色。

<h1 class="my-element">Heading</h1>

.my-element {
  color: red;
}

h1 {
  color: blue;
}

id 可让 CSS 更加具体， 因此应用于 ID 的样式将替换许多其他方式应用的样式。 这也是为什么通常不建议将样式附加到 id 的一个原因。 这可能会导致难以用其他样式覆盖该样式。

特异性是累积的

在下一课中您将了解到 每种类型的选择器都会获得相应的分数，用于表明其具体程度、 您用来定位元素的所有选择器的点会加在一起。 这意味着，如果您使用诸如以下的选择器列表来定位元素： a.my-class.another-class[href]:hover 会令您难以用其他 CSS 覆盖。 因此，为了帮助您提高 CSS 的可重用性 最好使选择器尽可能简单。 在需要时使用特异性工具来获取元素， 但请尽可能考虑重构很长而具体的选择器列表。

来源

您编写的 CSS 并不是应用于网页的唯一 CSS。 级联会考虑 CSS 的来源。 此来源包括浏览器的内部样式表 浏览器扩展程序或操作系统添加的样式， 和您编写的 CSS 文件 这些来源的特异性顺序（从最不具体到最具体）如下：

  1. 用户代理基本样式。这些是您的浏览器默认应用于 HTML 元素的样式。
  2. 本地用户样式。这些可来自操作系统级别，例如基本字体大小、 也更喜欢减少动作。 这些事件也可能来自浏览器扩展程序 例如可让用户自行为网页编写自定义 CSS 的浏览器扩展程序
  3. 编写的 CSS。您创作的 CSS。
  4. 编写日期：!important。您在编写的声明中添加的任何 !important。
  5. 本地用户样式 !important。来自操作系统级别的任何 !important 或浏览器扩展程序级 CSS
  6. 用户代理 !important。在默认 CSS 中定义的任何 !important 由浏览器提供
源顺序的直观演示，如列表中所述。

如果您编写的 CSS 中有 !important 规则类型 且用户在自定义 CSS 中采用 !important 规则类型，哪个 CSS 胜出？

检查您的理解情况

测试您对级联来源的了解情况

测试您对级联来源的了解，请考虑以下样式 不同来源的规则：

User-agent 样式

h1 { margin-block-start: 0.83em; }

引导

h1 { margin-block-start: 20px; }

页面作者样式

h1 { margin-block-start: 2ch; }

@media (max-width: 480px) {
  h1 { margin-block-start: 1ch; }
}

用户自定义样式

h1 { margin-block-start: 2rem !important; }

然后，给定以下 HTML：

<h1>Lorem ipsum</h1>

h1 中最后的 margin-block-start 是多少？

20px
引导加载程序是编写的源的一部分，它失去了重要的本地用户样式。
0.83em
用户代理样式来源会输给重要的本地用户样式。
2REM
此 !important 用户自定义样式的来源最具体。
2 声道
此作者样式是编写的来源的一部分，后者失去了重要的本地用户样式。
1 个声道
此作者样式是编写的来源的一部分，后者失去了重要的本地用户样式。

重要性

并非所有 CSS 规则的计算方式都相同， 或彼此具有相同的特异性。

重要性顺序，从最不重要的顺序 如下：

  1. 常规规则类型，例如 font-size、background 或 color
  2. animation 个规则类型
  3. !important 规则类型（遵循与来源相同的顺序）
  4. transition 个规则类型

有效动画和过渡规则类型的重要性高于常规规则。 在转换时，重要性高于 !important 个规则类型。 这是因为当动画或过渡效果变为活动状态时， 其预期行为是改变视觉状态。

使用开发者工具找出某些 CSS 未应用的原因

浏览器开发者工具通常会显示可能与元素匹配的所有 CSS， 与未使用的部分划掉。

浏览器开发者工具的图片，其中被覆盖的 CSS 已被划掉

如果您本来想应用的 CSS 根本没有显示， 则表示该元素与该元素不匹配 这种情况下，您需要考虑其他方面 可能是类或元素名称中有拼写错误，也可能是某些无效的 CSS。

检查您的理解情况

测试您对级联的了解程度

级联广告素材可用于...

解决了一个元素应用多个样式时发生的冲突。
这是它的主要目标之一，冲突解决。
确保绘制时每个属性只有一个样式值。
文本只能采用一种颜色，级联广告素材可用于确定应选择哪种颜色。
评分和权重样式规则。
评分和加权是级联广告素材排序阶段的一部分。
对样式属性进行排序和过滤。
排序和过滤是级联的阶段，可帮助您了解解决冲突的各个方面。

资源