CSS 播客 - 004：级联
CSS 表示级联样式表。 级联是一种算法，用于解决多个 CSS 规则应用于 HTML 元素时发生的冲突。 这就是使用以下 CSS 设置样式的按钮文本会显示为蓝色的原因。
button {
color: red;
}
button {
color: blue;
}
了解级联算法有助于您了解浏览器如何解决此类冲突。级联算法分为 4 个不同的阶段。
- 显示位置和显示顺序：CSS 规则的显示顺序
- 特异性：一种算法，用于确定哪个 CSS 选择器具有最强的匹配项
- 来源：CSS 的出现顺序及来源，是浏览器样式、浏览器扩展程序中的 CSS，还是您自己编写的 CSS
- 重要性：某些 CSS 规则的权重高于其他规则，尤其是
!important规则类型
出现的位置和顺序
级联计算在计算冲突解决时，系统会考虑 CSS 规则的显示顺序及其显示方式。
本课开始时的演示是最直接的定位示例。 有两条规则具有特异性完全相同的选择器，因此最后一条要声明的规则优先。
样式可以来自 HTML 网页上的各种来源，例如 <link> 标记、嵌入式 <style> 标记，以及元素的 style 属性中定义的内嵌 CSS。
如果您的 HTML 网页顶部有一个包含 CSS 的 <link>，则网页底部包含另一个包含 CSS 的 <link>：底部的 <link> 的针对性最强。嵌入的 <style> 元素也是如此。页面越具体，位置越靠下。
<link /> 元素中。
将样式设置为深色的 CSS 规则位于第二个关联的样式表中，并且由于其后面的位置而被应用。这种排序也适用于嵌入的 <style> 元素。如果在 <link> 之前声明这些样式，则关联样式表的 CSS 将获得最具体的明确版本。
<style> 元素在 <head> 中声明，而 <link /> 元素在 <body> 中声明。这意味着它比 <style> 元素具有更高的特异性声明了 CSS 的内嵌 style 属性将替换所有其他 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 的特异性相同，但样式规则的位置可让它胜出。
特异性
特异性是一种使用加权或评分系统来确定最具体 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。 这些来源的特异性顺序（从最不具体到最具体）如下：
- 用户代理基本样式。这些是默认情况下您的浏览器应用于 HTML 元素的样式。
- 本地用户样式。这些设置可能来自操作系统级别，例如基本字体大小或首选移动优化。它们还可以来自浏览器扩展程序，例如允许用户为网页编写自定义 CSS 的浏览器扩展程序。
- 自行编写的 CSS。您编写的 CSS。
- 作者：
!important。您添加到自己编写的声明中的任何!important。 - 本地用户样式
!important。来自操作系统级或浏览器扩展级 CSS 的任何!important。 - 用户代理
!important。在浏览器提供的默认 CSS 中定义的任何!important。
如果您编写的 CSS 中有 !important 规则类型，并且用户的自定义 CSS 中有 !important 规则类型，那么哪个 CSS 胜出？
检查您的掌握程度
考查你对级联源的了解情况
测试您对级联源的了解情况，并考虑来自各种源的以下样式规则：
用户代理样式
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是多少？
!important 用户自定义样式的来源最具体。重要性
并非所有 CSS 规则的计算方式都相同，或者每个规则的特异性也不同。
重要性顺序如下所示（从最不重要到最高）：
- 一般规则类型，如
font-size、background或color animation个规则类型!important规则类型（遵循与源站相同的顺序）transition个规则类型
活跃动画和过渡规则类型的重要性高于普通规则。如果是过渡比 !important 规则类型的重要程度高。这是因为，当动画或过渡变为活动状态时，其预期行为是更改视觉状态。
使用开发者工具找出某些 CSS 未应用的原因
浏览器开发者工具通常会显示可与某个元素匹配的所有 CSS，其中未使用的那些 CSS 会被划掉。
如果您预期应用的 CSS 根本没有显示，则表示该元素与该元素不匹配。在这种情况下，您需要查找其他地方，可能是类或元素名称拼写错误，或是否存在某些无效的 CSS。
检查您的掌握程度
测试您对级联相关知识的掌握情况
级联广告素材可用于...