该部分内容均来自 「MDN web docs」

选择器类型

1. 简单选择器（simple selectors）

直接匹配文档中的一个或者多个元素：基于元素类型 div p span；基于class；基于id。

• 类选择器
  可以叠加使用，叠加方式为

.warning {}
.important {}

<p class="warning important">我是女生</p>
<!--两种类如有冲突，以后面的important为准--!>

因此，选择器一定要：

1. 描述清晰（方便叠加使用）
2. 越是特殊类的，越要放到后面（这样特殊的优先级更高）

• id选择器
  哈希标志# + ID名称组成
  在一个文档中，一个id名必须是唯一的，如有重复，有一些浏览器只认可第一个id。

• 通用（universal）选择器
  通用选择器是老大（ultimate joker），他可以选中页面中的所有元素。我们很少用它来给页面的每一个元素添加式样，一般通用选择器和其他选择器组合（combination）使用。
  谨慎使用universal selector，尤其是在大的界面上，它会让页面的加载速度变慢。

• Combinators
  组合多重选择器，有以下四种可用的类型：

<section>
  <h2>Heading 1</h2>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
  <div>
    <h2>Heading</h2>
    <p>Paragraph 3</p>
    <p>Paragraph 4</p>
  </div>
</section>

1. The descendant selector

section p {
  color: blue;
}

section中的所有p标签

2. The child selector

section > p {
  background-color: yellow;
}

仅仅是section中的第一级子标签p

3. The adjacent sibling selector 相邻兄弟选择器

h2 + p {
  text-transform: uppercase;
}

h2后的第一个同级（same hierarchy level)兄弟标签
注意：此种用法是的h2和p一定是同级标签！如果是section + p，则不会生效。

4. The general sibling selector 通用兄弟标签

h2 ~ p {
  border: 1px dashed black;
}

h2后的所有同级兄弟标签

2. 属性选择器（attribute selectors）

形式是data-*，为特定属性的标签设定样式。
也叫“RegExp expression”，因为属性选择器提供的灵活匹配方式和正则表达式非常像（其实并不是真正的正则表达式）
使用方式：

<li data-vegetable="spicy">Red pepper</li>

[data-vegetable="spicy"] {
  color = red;
}

匹配方式：

• [attr |= val] exactly val or starts with val
• [attr ^= val] starts with val
• [attr $= val] ends with val
• [attr *= val] contains val [attr ~= val] treat spaces as part of val

3. 伪类选择器（pseudo-class selectors）

一共41种。
放选择器的末尾，只有在特定的状态时才会生效。
举例：

p {
  color: red;
}
p :hover {
  color:pink;
}

4. 伪元素选择器（pseudo-elements selectors）

一共6种。
和伪类选择器很像，同样是放在选择器的末尾使用。

5. 组合器（combinators）

一共5种。

• A, B
  A and/or B
• A B
  B是A的子级（descendant）
• A>B
  B是A的direct child
• A+B
  B是A的The next child of the same parent
• A~B
  B是A的one of the next children of the same parent

6. 多重选择器（multiple selectors）

就是combinators中的A, B, C这种类型。

暂时施工完毕。