CSS选择器是什么？CSS选择器有哪些类型？
在编写CSS样式时，我们需要先找到想要设置样式的HTML元素，这个用来定位目标元素的工具就是CSS选择器。简单来说，CSS选择器是CSS规则的一部分，它决定了样式会应用到哪些元素上，是连接HTML结构和CSS样式的桥梁。
CSS选择器的类型丰富，不同的选择器有不同的定位逻辑和使用场景，下面我们逐一介绍常见的CSS选择器类型。
一、基础选择器
基础选择器是最简单、最常用的选择器，是其他复杂选择器的基础。
1. 元素选择器（标签选择器）
元素选择器直接使用HTML标签名作为选择器，会选中页面中所有该类型的标签。比如使用p选择器会选中所有<p>标签，使用div选择器会选中所有<div>标签。
/* 选中所有p标签，设置文字颜色为灰色 */
p {
color: #666;
}
/* 选中所有div标签，设置背景色为浅蓝色 */
div {
background-color: #e6f7ff;
}2. 类选择器
类选择器以英文点号.开头，后面跟上自定义的类名，会选中所有class属性中包含该类名的元素。类选择器可以重复使用，一个元素也可以有多个类名，用空格分隔。
/* 选中所有class包含box的元素，设置边框 */
.box {
border: 1px solid #ddd;
padding: 10px;
}
/* 选中所有class包含text-red的元素，设置文字颜色为红色 */
.text-red {
color: #f5222d;
}对应的HTML结构示例：
<div class="box text-red">同时应用box和text-red的样式</div> <p class="text-red">只应用text-red的样式</p>
3. ID选择器
ID选择器以英文井号#开头，后面跟上自定义的ID名，会选中id属性等于该ID名的元素。需要注意的是，同一个页面中ID应该是唯一的，所以ID选择器通常只选中一个元素。
/* 选中id为header的元素，设置高度和背景色 */
#header {
height: 60px;
background-color: #1890ff;
}对应的HTML结构示例：
<div id="header">页面头部区域</div>
4. 通配选择器
通配选择器用星号*表示，会选中页面中所有的元素，通常用来做全局的基础样式重置。
/* 选中所有元素，清除默认的内外边距 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}二、组合选择器
组合选择器是通过组合多个基础选择器，或者根据元素之间的关系来定位目标元素的选择器。
1. 后代选择器
后代选择器用空格分隔两个选择器，会选中第一个选择器选中的元素内部，所有符合第二个选择器的后代元素，不管是直接子元素还是更深层的嵌套元素。
/* 选中div元素内部所有的p标签，设置行高 */
div p {
line-height: 1.6;
}对应的HTML结构示例中，下面两个<p>都会被选中：
<div>
<p>直接子元素p</p>
<section>
<p>嵌套在section里的p</p>
</section>
</div>2. 子元素选择器
子元素选择器用大于号>分隔两个选择器，只会选中第一个选择器选中的元素的直接子元素中符合第二个选择器的元素，不会选中更深层的嵌套元素。
/* 只选中div的直接子元素p，设置文字加粗 */
div > p {
font-weight: bold;
}上面的例子中，只有直接放在<div>里的<p>会被选中，嵌套在<section>里的<p>不会生效。
3. 相邻兄弟选择器
相邻兄弟选择器用加号+分隔两个选择器，会选中第一个选择器选中的元素后面，紧挨着它的、符合第二个选择器的兄弟元素，两者需要有相同的父元素。
/* 选中h2标签后面紧挨着的p标签，设置上边距 */
h2 + p {
margin-top: 20px;
}4. 通用兄弟选择器
通用兄弟选择器用波浪号~分隔两个选择器，会选中第一个选择器选中的元素后面，所有符合第二个选择器的兄弟元素，不需要紧挨着，只要在同一个父元素下即可。
/* 选中h2标签后面所有的p标签，设置文字颜色 */
h2 ~ p {
color: #333;
}三、属性选择器
属性选择器通过元素的属性或者属性值来选中元素，语法是用方括号[]包裹属性相关的规则。
/* 选中所有有title属性的元素 */
[title] {
cursor: help;
}
/* 选中type属性为text的input元素 */
input[type="text"] {
border: 1px solid #ccc;
height: 32px;
padding: 0 8px;
}
/* 选中href属性以https开头的a标签 */
a[href^="https"] {
color: #1890ff;
}
/* 选中src属性以.png结尾的img标签 */
img[src$=".png"] {
border: none;
}
/* 选中class属性包含list字符串的元素 */
[class*="list"] {
list-style: none;
}四、伪类选择器
伪类选择器用来选中元素的某个特定状态，或者处于特定位置的元素，语法是在选择器后面加冒号:加上伪类名称。
1. 状态伪类
状态伪类多用来选中处于交互状态的元素，比如链接的不同状态、输入框的焦点状态等。
/* 未访问过的链接 */
a:link {
color: #333;
}
/* 访问过的链接 */
a:visited {
color: #999;
}
/* 鼠标悬停时的元素 */
a:hover {
color: #1890ff;
text-decoration: underline;
}
/* 鼠标点击时的元素 */
a:active {
color: #096dd9;
}
/* 获得焦点的输入框 */
input:focus {
border-color: #1890ff;
outline: none;
}2. 结构伪类
结构伪类根据元素在DOM树中的位置来选中元素。
/* 选中ul下的第一个li子元素 */
ul li:first-child {
font-weight: bold;
}
/* 选中ul下的最后一个li子元素 */
ul li:last-child {
border-bottom: none;
}
/* 选中ul下第2个li子元素，n从1开始计数 */
ul li:nth-child(2) {
color: #f5222d;
}
/* 选中所有偶数位置的li子元素 */
ul li:nth-child(even) {
background-color: #fafafa;
}
/* 选中空元素，即没有子元素也没有文本内容的元素 */
div:empty {
display: none;
}五、伪元素选择器
伪元素选择器用来选中元素的某个部分，或者创建不在DOM树中的虚拟元素，语法是在选择器后面加双冒号::加上伪元素名称，不过为了兼容旧浏览器，单冒号也有支持。
/* 选中p标签的第一行文本 */
p::first-line {
font-size: 16px;
font-weight: bold;
}
/* 选中p标签的第一个字符 */
p::first-letter {
font-size: 24px;
float: left;
margin-right: 4px;
}
/* 在元素内容的前面插入虚拟内容 */
.tip::before {
content: "提示：";
color: #faad14;
font-weight: bold;
}
/* 在元素内容的后面插入虚拟内容 */
.link::after {
content: " →";
color: #1890ff;
}六、选择器优先级
当多个选择器都匹配到同一个元素，并且设置了冲突的样式时，就需要根据选择器的优先级来决定哪个样式生效。优先级从高到低大致为：
- 内联样式（写在元素的style属性里的样式）
- ID选择器
- 类选择器、属性选择器、伪类选择器
- 元素选择器、伪元素选择器
- 通配选择器
如果优先级相同，那么后定义的样式会覆盖先定义的样式。也可以通过!important强制提升某个样式的优先级，不过不建议过度使用，会增加样式维护的难度。
/* 这个样式优先级很高，会覆盖其他普通选择器设置的color */
.text {
color: #f5222d !important;
}