资料: 选择器（Selectors）

CSS有一套用于描述其语言的术语。在前面的教程中，你应该已经写过这个样式：

strong {
  color: red;
}

在CSS的术语中，上面这段代码被称为一条规则（rule）。这条规则以选择器strong开始，它选择要在DOM中哪些元素上使用这条规则。

• 更多细节
  花括号中的部分称为声明（declaration）
  关键字color是一个属性, red 是其对应的值.
  同一个声明中的 属性和值组成一个名值对（property-value pairs），名值对用分号分隔.
  这个教程中将类似strong的选择器称为标签选择器（tag selector）.CSS规范中称之为类型选择器（type selector）.

类选择器（Class selectors）

通过设置元素的 class 属性，可以为元素指定类名。类名由开发者自己指定。 文档中的多个元素可以拥有同一个类名。

在写样式表时，类选择器是以英文句号（.）开头的。

ID选择器（ID selectors）

通过设置元素的 id 属性为该元素制定ID。ID名由开发者指定。每个ID在文档中必须是唯一的。
在写样式表时，ID选择器是以#开头的。

例：

下面的p标签同时具有 class 属性和id 属性:

<p class="key" id="principal">

id 属性值 principal必须在文档中是唯一的；但文档中的其他标签可以有和p相同的 class 属性值 key.

在一个CSS样式表中, 下面的规则将使所有class属性等于key的元素文字颜色呈现绿色。（这些元素不一定都是 <p> 元素。）

.key {
  color: green;
}

下面的规则将使 id 等于 principal 的那个元素的文字变为粗体:

#principal {
  font-weight: bolder;
}

如果多于一个规则指定了相同的属性值都应用到一个元素上，CSS规定拥有更高确定度的选择器优先级更高。ID选择器比类选择器更具确定度, 而类选择器比标签选择器（tag selector）更具确定度。

• 更多细节
  你也可以将多个选择器组合起来构成更确定的选择器。

比如，选择器.key 选中所有class属性为 key的元素. 选择器 p.key 选中所有class属性为key的<p> 元素。

除了class 和 id，你还可以用方括号的形式指定其他属性。比如，选择器 [type='button'] 选中所有 type 属性为 button 的元素。

如果样式中包含冲突的规则，且它们具有相同的确定度。那么，后出现的规则优先级高。

如果你遇到规则冲突，你可以增加其中一条的确定度或将之移到后面以使它具有更高优先级。

伪类列表

:link
:visited
:active
:hover
:focus
:first-child
:nth-child
:nth-last-child
:nth-of-type
:first-of-type
:last-of-type
:empty
:target
:checked
:enabled
:disabled

资料: 基于关系的选择器

CSS还有多种基于元素关系的选择器。通过它们你可以更精确的选择元素。
常见的基于关系的选择器

选择器	选择的元素
AE	元素A的任一后代元素E (后代节点指A的子节点，子节点的子节点，以此类推)
A > E	元素A的任一子元素E(也就是直系后代)
E:first-child	任一是其父母结点的第一个子节点的元素E
B + E	元素B的任一下一个兄弟元素E
B ~ E	B元素后面的拥有共同父元素的兄弟元素E

你可以任意组合以表达更复杂的关系。
你还可以使用星号（*）来表示”任意元素“。

引用自：https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Getting_started/Selectors