CSS 播客 - 004：级联广告素材
CSS 代表层叠样式表。 级联是一种用于解决多个 CSS 规则应用于一个 HTML 元素的冲突的算法。 因此，使用以下 CSS 设置样式的按钮文本将显示为蓝色。
button {
color: red;
}
button {
color: blue;
}
了解级联算法有助于您了解浏览器如何解决此类冲突。 级联算法分为 4 个不同的阶段。
- 位置和显示顺序：CSS 规则的显示顺序
- 特异性：一种算法，用于确定哪个 CSS 选择器的匹配度最高
- 来源：CSS 出现的顺序和来源，无论是哪种浏览器样式， 浏览器扩展程序中的 CSS，或者您编写的 CSS
- 重要性：某些 CSS 规则的权重高于其他规则，
特别是
!important规则类型
位置和显示顺序
CSS 规则的显示顺序及其显示方式由级联考虑 同时计算冲突解决情况
本课程开头的演示是最直接的定位示例。 有两个规则具有完全相同的选择器， 因此最后一个声明的胜出者
样式可以来自 HTML 网页上的各种来源，
例如 <link> 标记，
嵌入式 <style> 标记；
和内嵌 CSS（如元素的 style 属性中所定义）。
如果您的 HTML 网页顶部有一个包含 CSS 的 <link>，
则另一个包含 CSS 的 <link>：底部的 <link> 的特异性最强。
嵌入的 <style> 元素也会发生同样的情况。
位置越靠下，显示位置越具体。
<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 才能胜出。
明确性
特异性是一种算法，用于确定哪个 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 文件 这些来源的特异性顺序（从最不具体到最具体）如下：
- 用户代理基本样式。这些是您的浏览器默认应用于 HTML 元素的样式。
- 本地用户样式。这些可来自操作系统级别，例如基本字体大小、 也更喜欢减少动作。 这些事件也可能来自浏览器扩展程序 例如可让用户自行为网页编写自定义 CSS 的浏览器扩展程序
- 编写的 CSS。您创作的 CSS。
- 编写日期：
!important。您在编写的声明中添加的任何!important。 - 本地用户样式
!important。来自操作系统级别的任何!important或浏览器扩展程序级 CSS - 用户代理
!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 是多少？
!important 用户自定义样式的来源最具体。重要性
并非所有 CSS 规则的计算方式都相同， 或彼此具有相同的特异性。
重要性顺序，从最不重要的顺序 如下：
- 常规规则类型，例如
font-size、background或color animation个规则类型!important规则类型（遵循与来源相同的顺序）transition个规则类型
有效动画和过渡规则类型的重要性高于常规规则。
在转换时，重要性高于 !important 个规则类型。
这是因为当动画或过渡效果变为活动状态时，
其预期行为是改变视觉状态。
使用开发者工具找出某些 CSS 未应用的原因
浏览器开发者工具通常会显示可能与元素匹配的所有 CSS， 与未使用的部分划掉。
如果您本来想应用的 CSS 根本没有显示， 则表示该元素与该元素不匹配 这种情况下，您需要考虑其他方面 可能是类或元素名称中有拼写错误，也可能是某些无效的 CSS。
检查您的理解情况
测试您对级联的了解程度
级联广告素材可用于...