CSS选择器
CSS 选择器用于“查找”（或选取）要设置样式的 HTML 元素。我们可以将 CSS 选择器分为五类：
（1）简单选择器（根据名称、id、类来选取元素）
（2）组合器选择器（根据它们之间的特定关系来选取元素）
（3）伪类选择器（根据特定状态选取元素）
（4）伪元素选择器（选取元素的一部分并设置其样式）
（5）属性选择器（根据属性或属性值来选取元素）
选择器由 HTML 元素的 id、class 属性或元素名本身以及一些特殊符号构成，用来指定要为哪个 HTML 元素定义样式。选择器是 CSS 样式规则中重要的组成部分，我们可以将选择器看作是 CSS 样式与 HTML 元素之间的匹配模式，与选择器关联的样式规则会应用于选择器所指定的 HTML 元素上。CSS 中提供了多种不同类型的选择器，您可以根据自己的喜好来选择使用。
一、常用的四类选择器（基本）
1、元素选择器
元素选择器根据元素名称来选择 HTML 元素。
在这里，页面上的所有 <p> 元素都将居中对齐，并带有红色文本颜色：
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p>每个段落都会受到样式的影响。</p>
<p id="para1">我也是！</p>
<p>还有我！</p>
</body>
</html>展示效果如图：
2. id选择器
id 选择器使用 HTML 元素的 id 属性来选择特定元素。
元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素！
要选择具有特定 id 的元素，请写一个井号（＃），后跟该元素的 id。
这条 CSS 规则将应用于 id="para1" 的 HTML 元素：
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>本段不受样式的影响。</p>
</body>
</html>展示效果如图：
3. 类选择器
类选择器选择有特定 class 属性的 HTML 元素。
如需选择拥有特定 class 的元素，请写一个句点（.）字符，后面跟类名。
在此例中，所有带有 class="center" 的 HTML 元素将为红色且居中对齐：
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">居中的红色标题</h1>
<p class="center">居中的红色段落。</p>
</body>
</html>展示效果如图：
4. 通配选择器
作用：选中页面中所有元素
语法：*{}
二、复合选择器（两种）
1. 交集选择器
作用：选中同时符合多个选择器条件的元素
语法：选择器1选择器2...{}
注意：如果选择器中有元素的选择器，元素选择器必须放在前面
2. 并集选择器
作用：同时选中对应选择器的元素
语法：选择器1，选择器2，选择器3...{}
三、关系选择器
父子关系：父元素直接包含子元素，子元素直接被父元素包含
<div><p></p></div> div标签是p标签的父元素，p标签是div标签的子元素
祖先后代关系：祖先元素直接或间接包含后代元素
<div><p><span></span></p></div> div标签是p标签和span标签的祖先元素，p标签和span标签是div标签的后代元素
兄弟关系：拥有同一个父元素
<div><p></p><h1></h1></div> p标签和h1标签就是兄弟关系
四、属性选择器
| [属性] | 选中含有指定属性的元素 |
| [属性=属性值] | 选中含有指定属性和指定属性值的元素 |
| [属性^=属性值] | 选中含有指定属性和指定属性值开头的元素 |
| [属性$=属性值] | 选中含有指定属性和指定属性值结尾的元素 |
| [属性*=属性值] | 选中指定属性名和含有指定属性值的元素 |
五、伪类选择器
伪类：不存在的类，表示元素的一种状态
1. 常用的伪类
:first-child 第一个子元素 :last-child 最后一个子元素 :nth-child() 选中第n个元素 关于:nth-child()的特殊值 n 第n个 n的范围0到正无穷（全选） even或2n 选中偶数位的元素 odd或2n+1 选中奇数位得到元素 上面的都是在所有元素中选择 下面都是在相同元素中选择 :first-of-type 第一个子元素 :last-of-type 最后一个子元素 :nth-of-type() 选中第n个元素
2. 否定伪类
:not() 将符号条件的元素去除
3. 元素的伪类
:link 表示未访问过的a标签 :visited 表示访问过的a标签 以上两个伪类是超链接所独有的 由于隐私的问题，所以visited这个伪类只能修改链接的颜色 以下两个伪类是所有标签都可以使用 :hover 鼠标移入后元素的状态 :active 鼠标点击后，元素的状态
六、伪元素选择器
同伪类一样，伪元素也是不存在的元素，表示元素的特殊状态。
常见的几个伪元素： ::first-letter 表示第一个字母 ::first-line 表示第一行 ::selection 表示选中的元素 ::before 元素开始的位置前 ::after 元素结束的位置后 befor和after必须配合contend一起使用(before,after所写的内容无法选中且永远在最前和最后)
本文固定URL：https://www.dotcpp.com/course/1124