在CSS中，选择器用于定位我们想要样式化的网页元素。各种各样可用的CSS选择器允许我们精确选择要样式化的元素

不同类型的选择器

选择器可以被分为以下类别

• 简单选择器（Simple selectors）：通过元素类型、class或id 匹配一个或多个元素。
• 属性选择器（Attribute selectors）：通过 属性 / 属性值 匹配一个或多个元素。
• 伪类（Pseudo-classes）：匹配处于确定状态的一个或多个元素，比如被鼠标指针悬停的元素，或当前被选中或未选中的复选框，或元素是DOM树中一父节点的第一个子节点。
• 伪元素（Pseudo-elements）：匹配处于相关的确定位置的一个或多个元素，例如每个段落的第一个字，或者某个元素之前生成的内容。
• 组合器（Combinators）：这里不仅仅是选择器本身，还有以有效的方式组合两个或更多的选择器用于非常特定的选择的方法。例如，你可以只选择divs的直系子节点的段落，或者直接跟在headings后面的段落。
• 多重选择器（Multiple selectors）：这些也不是单独的选择器；这个思路是将以逗号分隔开的多个选择器放在一个CSS规则下面， 以将一组声明应用于由这些选择器选择的所有元素。

简单选择器（Simple selectors）

元素选择器 Element Selectors
例如：下面代码中html文档中所有的 p元素和所有的div都会被选中。

p {
  color: red;
}

div {
  color: blue;
}

ID 选择器 ID Selectors
选中id为laowang的p元素，设置p元素的字体大小为24px。

<p id="laowang">你好 CSS</p>

#laowang {
  font-size: 24px;
}

类选择器 Class Selectors
一个元素也可以应用多个不同的CSS 类，一个 CSS类可以应用到多个不同的元素。

  <ul>
  <li class="first done">吃饭</li>
  <li class="second done">睡觉</li>
  <li class="third">打豆豆</li>
</ul>
.first {
  font-weight: bold;
}

.done {
  text-decoration: line-through;
}

通用选择器 Universal Selector

* {
  box-sizing: border-box;
}

.flex-container * {
  flex-basis: 100%;
}

属性选择器

属性选择器是一种特殊类型的选择器，它根据元素的属性和属性值来匹配元素。它们的通用语法由方括号 ([]) 组成，其中包含属性名称，后跟可选条件以匹配属性的值。 属性选择器可以根据其匹配属性值的方式分为两类： 存在和值属性选择器和子串值属性选择器。

存在和值（Presence and value）属性选择器
这些属性选择器尝试匹配精确的属性值：实例HTML代码如下

我的食谱配料: <i lang="fr-FR">Poulet basquaise</i>
<ul>
  <li data-quantity="1kg" data-vegetable>Tomatoes</li>
  <li data-quantity="3" data-vegetable>Onions</li>
  <li data-quantity="3" data-vegetable>Garlic</li>
  <li data-quantity="700g" data-vegetable="not spicy like chili">Red pepper</li>
  <li data-quantity="2kg" data-meat>Chicken</li>
  <li data-quantity="optional 150g" data-meat>Bacon bits</li>
  <li data-quantity="optional 10ml" data-vegetable="liquid">Olive oil</li>
  <li data-quantity="25cl" data-vegetable="liquid">White wine</li>
</ul>

[attr]
该选择器选择包含attr属性的所有元素，不论 attr 的值为何。

** 所有具有"data-vegetable"属性的元素将被应用绿色的文本颜色 **
[data-vegetable] {
  color: green
}

[attr=val]
该选择器仅选择 attr属性被赋值为 val 的所有元素。

  ** 所有具有"data-vegetable"属性且属性值刚好为"liquid"的元素将被应用金色的背景颜色 **
[data-vegetable="liquid"] {
  background-color: goldenrod;
}

[attr~=val]
该选择器仅选择具有 attr 属性的元素，而且要求 val 值是 attr值包含的被空格分隔的取值列表里中的一个。

                                  
     ** 所有具有"data-vegetable"属性且属性值包含"spicy"的元素，
      即使元素的属性中还包含其他属性值，都会被应用红色的文本颜色 **
                                  
[data-vegetable~="spicy"] {
  color: red;
}

子串值（Substring value）属性选择器

这种情况的属性选择器也被称为“伪正则选择器”，因为它们提供类似 regular expression 的灵活匹配方式（但请注意，这些选择器并不是真正的正则表达式）

[attr|=val]
选择attr属性的值是 val 或值以 val- 开头的元素（注意，这里的 “-” 不是一个错误，这是用来处理语言编码的）。

** 语言选择的经典用法 **
[lang|="fr"] {
  font-weight: bold;
}

[attr^=val]
选择attr属性的值以 val 开头（包括 val）的元素。

   **具有属性"data-quantity"其值以"optional"开头的所有元素 **
[data-quantity^="optional"] {
  opacity: 0.5;
}

[attr$=val]
选择attr属性的值以 val 结尾（包括 val）的元素。

 **具有"data-quantity"属性其值以"kg"结尾的所有元素**
[data-quantity$="kg"] {
  font-weight: bold;
}

[attr*=val]
选择attr属性的值中包含子字符串 val 的元素（一个子字符串就是一个字符串的一部分而已，例如，”cat“ 是 字符串 ”caterpillar“ 的子字符串）。

**具有"data-vegetable"属性含有值"not spicy"的所有元素,都变回绿色**
[data-vegetable*="not spicy"] {
  color: green;
}