语言基础知识
对于CSS的大部分内容，你不需要特意去学习属性和值，你可以在需要时查找它们。 然而，CSS中一些基础知识没有掌握好，你将很难去理解它。 这些基础知识值得你花时间去理解，从长远看，它会帮你节省很多时间和少走弯路。
选择器，不仅仅有类
选择器的表现如标题所说的，它选择文档的某些部分，以便你可以将CSS规则应用于它。 大多数人都熟悉使用 class，或在 直接使用HTML元素设置样式，比如 body，但是还有很多更高级的选择器可以根据文档中的位置选择元素，直接选择位于元素之后的元素，或选择表格中的奇数行。
这些选择器是CSS3规范的一部分（你可能听说过它们被称为第3级选择器）具有出色的浏览器支持。 有关可以使用的各种选择器的详细信息，请参阅 MDN 参考。
有些选择器的行为就好像你已经将类应用于文档中的某些内容。 例如p:first-child就像你在第一个p元素中添加了一个类一样，这些被称为 伪类选择器。 伪元素选择器就像动态插入一个元素一样，例如::first-line的表现与用span 包裹第一行文本类似。 但是，如果该行的长度发生变化，它将重新应用，如果插入该元素则不会出现这种情况。 这些选择器可能会相当复杂。 在下面的CodePen中是一个用伪类链接的伪元素的例子。 我们使用:first-child伪类定位第一个p元素，然后::first-line选择器选择该元素的第一行，就好像在第一行周围添加了一个<span>以使其变为粗体和改变颜色。
继承和层叠
层叠是指当元素应用了多个样式规则，哪个规则优先应用。 如果你曾经遇到过无法理解为什么某些CSS似乎没有应用的情况，那可能是层叠没有运用好。 层叠与继承紧密相关，继承定义了子元素可以继承父元素的样式属性。 它还与特异性有关，不同的选择器具有不同的特异性，当有几个选择器可以应用于一个元素时，继承可以决定应用哪个规则。
注意：为了理解所有这些内容，我建议阅读MDN CSS简介中的 层叠和继承。

标准流
如果你的文档内容用一些HTML标记，你的文档将具有可读性。标题和段落会另起新的一行，单词组成句子时，它们之间有一个空格。标记是用来格式化的，像 em 不会破坏句子的流。 句子会表现标准流，或块流布局。句子的每个部分都被描述为“在流中”，它知道句子其余内容，所以不会重叠。
如果你去了解，而不是去反对这种行为，你会变得更加轻松。这是为什么从正确标记的HTML文档开始很有意义的原因之一，由于浏览器遵守正常流和内置样式表，你的内容从可读的地方开始。
格式化上下文
一旦文档的内容处于正常流程中，您可能希望更改其中一些内容的外观。 你可以通过更改元素的格式上下文来完成此操作。 举个一个非常简单的示例，如果你希望所有段落连在一起而不是从新行开始，你可以设置 p 元素的样式属性 display:inline ，将 p 元素由块级元素变成内联元素。
本质上，格式化上下文定义了外部和内部类型。外部控制元素与页面上其他元素的行为，内部控制子元素的外观。例如，当你设置 display:flex ，你在设置外部为块格式化上下文，设置子元素为 flex 格式化上下文。
注意：最新版本的Display规范改变了 display 的值，显式声明外部和内部的类型。因此，将你可能会声明 display:block flex; （外部为 block，内部为 flex）