这是我参与「第五届青训营」伴学笔记创作活动的第 7 天

2.2 CSS构建基础

2.2.1 层叠与继承

当你使用选择器列表时，如果任何一个选择器无效 (存在语法错误)，那么整条规则都会被忽略。

在下面的示例中，无效的 class 选择器会被忽略，而h1选择器仍会被样式化。

h1 {
  color: blue;
}

..special {
  color: blue;
}

但是在被组合起来以后，整个规则都会失效，无论是h1还是这个 class 都不会被样式化。

h1, ..special {
  color: blue;
}

有几组不同的选择器，知道了需要哪种选择器，你会更容易正确使用它们。在本文的子篇中，我们将会来更详细地看下不同种类的选择器。

这个选择器组，第一个是指向了所有 HTML 元素 <h1>。

h1 { }

它也包含了一个 class 的选择器：

.box { }

亦或，一个 id 选择器：

#unique { }

这组选择器根据一个元素上的某个标签的属性的存在以选择元素的不同方式：

a[title] { }

或者根据一个有特定值的标签属性是否存在来选择：

a[href="https://example.com"] { }

这组选择器包含了伪类，用来样式化一个元素的特定状态。例如:hover伪类会在鼠标指针悬浮到一个元素上的时候选择这个元素：

a:hover { }

它还可以包含了伪元素，选择一个元素的某个部分而不是元素自己。例如，::first-line是会选择一个元素（下面的情况中是<p>）中的第一行，类似<span>包在了第一个被格式化的行外面，然后选择这个<span>。

p::first-line { }

最后一组选择器可以将其他选择器组合起来，更复杂的选择元素。下面的示例用运算符（>）选择了<article>元素的初代子元素。

article > p { }

下面的表格让你可以浏览你可以用的选择器，还有本指南中教你如何使用每种选择器的页面的链接。我还加上了一个能查看浏览器对每个选择器的支持信息的 MDN 页面链接。你可以把这个作为回头的参考，在你以后需要查询文献中提到的选择器的时候，或者是在你广义上实验 CSS 的时候。