选择器由 HTML 元素的 id、class 属性或元素名本身以及一些特殊符号构成，用来指定要为哪个 HTML 元素定义样式。选择器是 CSS 样式规则中重要的组成部分，我们可以将选择器看作是 CSS 样式与 HTML 元素之间的匹配模式，与选择器关联的样式规则会应用于选择器所指定的 HTML 元素上。CSS 中提供了多种不同类型的选择器，您可以根据自己的喜好来选择使用。
1. 通用选择器
通用选择器用星号*表示，它不匹配某个特定的 HTML 元素，而是匹配 HTML 文档中的每个元素。在开发中，我们通常使用通用选择器来清除 HTML 元素中默认的内外边距，如下所示：
* {
margin: 0 auto;
padding: 0;
}2.元素(标签)选择器
一个完整的 HTML 文档由各式各样的标签组成，而标签选择器可以通过具体的标签名称来匹配文档内所有同名的标签，如下所示：
p {
color: blue;
}
组合选择器: h1,p{color:red}3.类选择器
类选择器可以根据标签的 class 属性匹配具体的 HTML 标签，所有符合条件的标签都会根据选择器内的样式进行格式化。类选择器的定义需要用到一个英文的句号.，后面紧跟 class 属性的值。
.black {
color: black;
}.black选择器能够匹配文档中所有具有class="black"属性的标签。
由于 class 属性不是唯一的，可以应用于不同的标签，因此您还可以在定义类选择器时指定具体的标签，如下所示：
结合标签选择器
p.black {
color: black;
}p.black选择器仅会将其中的样式应用到所有具有class="black"属性的<p>标签中，对于其它的具有class="black"属性的标签则没有影响。
另外，一个 HTML 标签中 class 属性可能不止一个，例如：
<p class="info selected"></p> <p class="info"></p>
假如我们要为所有 class 属性包含 info 的元素设置粗体，为所有 class 属性包含 selected 的元素设置红色字体，为 class 属性中既包含 info 又包含 selected 的元素设置蓝色背景，则可以写成下面这样：
.info {
font-weight:bold;
}
.selected {
color: red;
}
.info.selected {
background: blue;
}这种由多个 class 属性值所组成的类选择器我们可以称之为“多类选择器”，而前面介绍的由单个 class 属性值定义的类选择器可以称为“单类选择器”。
注意：多类选择器中，多个 class 属性之间是紧挨着的（例如 .info.selected），不需要使用空格分开。
4. id选择器
ID 选择器用来匹配 HTML 文档中具有指定 ID 属性的标签，ID 选择器的定义需要用到井号#，后面紧跟 ID 属性的值，如下所示： 纯文本复制
#nav {
color: red;
}#nav选择器能够匹配文档中具有id="nav"属性的标签。
注意：一个id选择器的属性值在html文档中只能出现一次，避免写js获取id时出现混淆。
5.派⽣选择器
后代选择器
当一个<p>标签嵌套在一个<div>标签内部的时候，就可以将这个<p>标签看作是<div>标签的后代。当我们需要选择一个标签的后代标签时，就可以使用后代选择器。后代选择器的定义方式就是将标签名、class 属性或 id 属性等按照标签的嵌套关系由外到内的依次罗列，中间使用空格分开，如下所示：
ul li a {
text-decoration: none;
}ul li a选择器仅会匹配无序列表<ul>标签的所有后代<a>标签。
⼦元素选择器
子选择器与后代选择器类似，不过子选择器只会匹配某个元素的直接后代（元素与其子元素之间只有一层嵌套关系），子选择器由两个或多个选择器组成，选择器之间用大于号>分隔开，如下所示：
p > strong {
color:red;
}
p > strong选择器会将下面代码中第一个<p>标签的子标签<strong>内的文字设置为红色，但对第二个<p>标签中的<strong>标签则没有影响。
<p>欢迎访问<strong>编程帮</strong>！</p> <p><em><strong>编程帮（biancheng.net）</strong></em>，一个在线学习编程的网站，专注于分享优质编程教程。</p>
相邻选择器（兄弟）
相邻兄弟选择器 (+) 介于两个选择器之间，当第二个元素紧跟在第一个元素之后，并且两个元素都是属于同一个父元素的子元素，则第二个元素将被选中。
h1 + p {
color: blue;
font-size: 18px;
}
ul.task + p {
color: #f0f;
text-indent: 30px;
}h1 + p选择器会匹配同一父级元素下紧邻<h1>标签并在其后的<p>标签。ul.task + p选择器则会匹配同一父级元素下紧邻<ul>标签并在其后的<p>标签，但<ul>要具有class="task"属性。
