CSS 的层次

所以，上次我来这里时，我们讨论了 Javascript 堆栈的各个层以及它们如何组合在一起，在美丽混乱的框架上构建框架！

如果您错过了那篇文章，请在这里查看：Javascript 的层次。

那篇文章似乎引起了很多人的共鸣，这真是太棒了。在我写这篇文章的时候，我开始尝试修复我网站上一个元素的对齐问题。在尝试的过程中，我突然意识到 CSS 也有层。所以，我们开始吧！

W3C 和标准

如果你以前听说过，请打断我，CSS 有一个标准。该标准由 CSS 工作组 (W3C) 控制。2011 年，W3C 决定将 CSS 标准划分为可独立推进的模块。因此，该语言不再提供完整版本的更新。你可能听说过 CSS3，它是 CSS 的最新版本。从技术上讲，该标准并不正式存在，因为现在所有模块都是独立的，但人们使用这个术语是因为所有模块都是从 3 级标准化开始的。

基于此标准，是否支持它取决于浏览器。每个浏览器都有自己的 CSS 解析器/渲染引擎。这就是为什么你经常听到人们讨论 Internet Explorer 支持什么、不支持什么。所以，就像 JavaScript 一样，你会担心你的 CSS 能否被显示它的浏览器解释。

CSS 和 DOM

当您在浏览器中打开您的网站时，渲染引擎会解析 HTML 并解释 CSS。当它将元素添加到 DOM 树时，它会将它们映射到其关联的样式。在这里，您可以打开检查器，查看给定元素最终的样式细节。

如果您愿意，您甚至可以尝试不同的风格！

层叠的风格，就像埃及的河流

CSS 实际上是层叠样式表 (Cascading Style Sheets) 的缩写。浏览器在解释 CSS 时，必须考虑来自不同来源的不同样式表。

有一些浏览器样式是由浏览器本身提供的；还有一些“作者”样式，它们是您（或其他人）构建的应用于正在呈现的网站的样式表；您甚至可以使用用户样式来覆盖特定人员对网站的看法的样式。

当它们发生冲突时会发生什么？谁会胜出？CSS 对这些不同的样式如何合并有一个层次结构，并且根据具体情况确定哪种样式具有权威性。

更多详细信息请查看CSS Cascade 简介

我懂 CSS！等等，这个 LESS 是谁？！

因此，除了代码解释的层次之外，编写 CSS 本身就包含许多层次。当我们想到样式时，我们通常会想到一个充满键值对的 CSS 文件，这些键值对会将样式赋值给我们的代码。这些本质上是应用于指定 HTML 元素的规则。

a {
    color: black;
}

然而，CSS 也收获了一些朋友。同样受欢迎的还有 LESS 和 Sass。它们被认为是 CSS 预处理器。它们基于基本的 CSS 并扩展了可用的语法，因此您可以直接在样式文件中包含变量、嵌套规则（以及更多）。

$brand-color: #fc3;
a {
    color: $brand-color;
}
nav {
    background-color: $brand-color;
}

这是 Sass 语法的一个示例

顺便说一句，Sass 曾经是一门独立的语言。在 Sass 3 之后，它兼容 CSS，所以现代的 Sass 实际上是 SCSS，使用 .scss 文件扩展名。哦，对了，这两种语言现在都还存在，而且有些人更喜欢使用 Sass 的原始语法，所以要注意这一点。好玩啊！

特异性和选择器

关于样式，需要理解的一点是，样式的设计方式允许开发人员以最高效的级别应用它们。由于页面上的 HTML 元素非常多，因此选择一种影响所有标题或所有按钮的样式比单独设置每个元素的样式要容易得多。CSS 通过使用将样式映射到元素的选择器来处理这个问题。选择器有三种类型。

• 类型选择器
• 类选择器
• 属性选择器
• ID 选择器

也有通用选择器，但它们对特异性没有影响

选择器可以以多种方式组合使用。第一种是使用多个选择器来增加要映射到的元素的特异性。

a {
    color: black;
}

a.thanos {
    color: purple;
}

结合这个 HTML，链接会是什么颜色？

<a class="thanos" href="/"> Click Me! </a>

链接会变成紫色！这是因为它有 class name thanos，所以有两个选择器。a我们的标签样式只使用一个选择器来映射到元素，所以thanos规则更具体，最终胜出。

使用这种特异性，你可以将网站上的所有链接都设为黑色，同时仍然决定某个页面上的某个链接应该设为紫色。但是，如果你尝试这样做，会发生什么呢？

a {
    color: black;
}

.thanos {
    color: purple;
}

两种情况下都只有一个选择器，因此样式可能会发生冲突。然而，CSS 有规则规定要监听哪些样式。这是选择器特异性发挥作用的第二种方式。操作顺序是：id 选择器最具体，其次是 class 选择器（与属性选择器紧密相关），然后是标签选择器。

如果您感兴趣， Mozilla 对此有更深入的解释。请注意，您可以结合使用这两个特异性概念。

内联样式

好的，下一层！到目前为止，我一直假设所有 CSS 都包含在某个样式表中。但是，样式可以直接在 HTML 中指定。不过，这会覆盖项目样式表中该元素的样式。这是因为根据 CSS，内联样式被认为更具体。

return (
    <h1 style={{ margin: 0, flex: 1 }}>
        LAURIE             
    </h1>
)}

许多人认为内联样式是一种糟糕的做法。原因就在于这种特异性问题。由于样式是在底层编写的，如果样式被覆盖却没有意识到具体位置，很快就会造成混乱。此外，内联样式通常会迫使你编写更多的 CSS，因为你要单独为可能重复或共享样式的元素添加样式。

我想我知道这种风格是从哪里来的？

这些样式层有很多种排列组合。CSS 的挑战之一在于，任何给定的样式都可以通过多种不同的方式实现。样式的放置位置、触发方式等等都至关重要。但了解正确的样式层将有助于您理清思路。如果您记不住，可以把这张方便的速查表放在口袋里。

如果您正在寻找其他类似的内容，请查看：
不要被错误愚弄
在线学习技巧和窍门
我的 Gatsby 和 GraphQL 系列