一、什么是选择器
选择器是指通过一定的语法规则选取到对应的HTML标记，然后给这个对应的HTML标记设置样式
二、选择器的分类
CSS中提供了多种不同类型的选择器，例如基本选择器、组合选择器、伪类选择器、伪元素选择器等等。
1、基本选择器
（1）概览
- 在CSS中，选择器用于选取HTML文档中的元素。
- 根据选择器的类型和语法的不同，可以选择不同的元素。
- 常用的有id选择器、类选择器、元素/标签选择器和通用选择器。
| 选择器 | 格式 | 含义 | 缺点 | 举例 |
|---|---|---|---|---|
| id选择器 | #id属性值 | id选择器可以为标有特定的ID的HTML元素指定特定的样式，只能使用一次，ID选择器以“#”来定义。 | 只能使用一次 | #title |
| 类选择器 | .class属性值 | 类选择器，给拥有指定的CLASS属性值的元素设置样式 | 可以根据需求选择 | .box |
| 元素/标签选择器 | 标签名 | 标签选择器，匹配对应的HTML标签。 | 不能差异化选择 | p |
| 通用选择器 | * | 通用选择器，将匹配HTML所有标签。 | 选择的太多，有部分不需要 | * |
（2）id选择器
- 通过元素的id属性进行选取。
- 每个页面中id值是唯一的，所以在css中最好不重复使用id选择器。
<style>
/*id选择器*/
#d1 { /*找到id是d1的标签，将文本颜色变成绿黄色*/
color: greenyellow;
}
</style>
（3）类选择器
类选择器可以根据标签的 class 属性匹配具体的 HTML 标签，所有符合条件的标签都会根据选择器内的样式进行格式化。类选择器的定义需要用到一个英文的句号.，后面紧跟 class 属性的值，如下所示：
.black {
color: black;
}
.black选择器能够匹配文档中所有具有class="black"属性的标签。
由于 class 属性不是唯一的，可以应用于不同的标签，因此您还可以在定义类选择器时指定具体的标签，如下所示：
p.black {
color: black;
}
p.black选择器仅会将其中的样式应用到所有具有class="black"属性的标签中，对于其它的具有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）元素/标签选择器
- 通过元素的标签名称进行选取。
- 比如选择所有的段落、列表等。
<style>
/*元素(标签)选择器*/
span { /*找到所有的span标签*/
color: green;
}
</style>
（5）通用选择器
*表示所有的元素。
<style>
/*通用选择器*/
* { /*将HTML页面上所有的标签全部找到*/
color: blue;
}
</style>
（6）总体应用实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* id选择器 */
#myH1 {
color: red;
}
/* 类选择器 */
.title {
font-size: 24px;
}
.content {
line-height: 1.5;
}
/* 元素/标签选择器 */
p {
color: blue;
}
ul {
list-style-type: none;
}
/* 通用选择器 */
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<h1 id="myH1">Hello, World!</h1>
<p class="title">This is a title.</p>
<p class="content">This is a content.</p>
<ul>
<li>This is a list item.</li>
<li>This is another list item.</li>
</ul>
</body>
</html>
在上面的示例中，我们创建了一个包含一个id为"myH1"的标题、两个类分别为"title"和"content"的段落以及一个无序列表的HTML文档。
2、组合选择器
（1）概览
- 后代选择器
- 儿子选择器
- 毗邻选择器
- 弟弟选择器
| 选择器 | 格式 | 含义 | 举例 |
|---|---|---|---|
| 后代元素选择器 | E F | 后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔 | div span |
| 儿子元素选择器 | E>F | 子元素选择器，匹配所有E元素的子元素F | div>span |
| 毗邻元素选择器 | E+F | 毗邻元素选择器，匹配所有紧随E元素之后的同级元素F，同级别紧挨着的下面第一个 | div+span |
| 弟弟元素选择器 | E~F | 弟弟元素选择器，匹配所有E元素之后的所有元素F | div~span |
（2）设置标签关系
<div>div1
<div>div2
<p>p1</p>
</div>
<p>p2
<span>span1</span>
</p>
<span>span2</span>
</div>
- 通过嵌套层级来表示亲属关系
- 对于div1来说：div2、p2、span2都是儿子
- 对于div2、p2、span2来说：div1就是父亲
- 对于p1来说：div2是父亲 div1是爷爷(可以将div1和div2统称为祖先)
- 对于span2来说：div2、p2是哥哥 span2是弟弟
- div1内部所有的标签无论层级都可以称之为是div1的后代
ps:判断的时候一定要看层级关系
（3）样式设计实例
/*# 1.儿子选择器(关键符号是大于号)*/
d1 > span {
/*查找id是d1标签内部所有的儿子span*/
color: red;
}
/*# 2.后代选择器(关键符号是空格)*/
d1 span {
/*查找id是d1标签内部所有的后代span*/
color: red;
}
/*# 3.毗邻选择器(关键符号是加号)*/
d1 + a {
/*查找id是d1标签同级别下面紧挨着第一个a标签*/
color: red;
}
/*# 4.弟弟选择器(关键符号是小波浪号)*/
d1 ~ a {
/*查找id是d1标签同级别下面所有a标签*/
color: red;
}
3、属性选择器
（1）概览
- 含有某个属性
- 含有某个属性并且有某个值
- 含有某个属性并且有某个值的某个标签
attr是英文单词 “attribude”的简写，中文意思 “属性” 属性名
val是英文单词 “value”的简写，中文意思是“值” 属性值
| 属性选择器种类 | 含义 | 举例 |
|---|---|---|
| [attr] | 匹配所有具有attr属性的元素，不考虑它的值 | [align] |
| [attr = "val"] | 匹配所有attr属性值等于val的元素 | [align="center"]{.....}，属性值一般加引号 |
| 标签 [attr = "val"] | 匹配所有attr属性值等于val的元素的标签 | input [align="center"] |
（2）实例
- 属性选择器是以[]作为标志的
<style>
/*第一种情况*/
[username] { /*将所有含有属性名是username的标签背景色改为红色*/
background-color: red;
}
/*第二种情况*/
[username='xiao'] { /*找到所有属性名是username并且属性值是xiao的标签*/
background-color: orange;
}
/*第三种情况*/
input[username='xiao'] { /*找到所有属性名是username并且属性值是xiao的input标签*/
background-color: bisque;
}
</style>
4、分组与嵌套
（1）分组
/*查找div或者p或者span*/
div, p, span {
color: red;
}
（2）嵌套
/*查找id是d1或者class包含c1或者span*/
#d1, .c1, span {
color: red;
}
（3）综合
玩法1
div#d1 查找id是d1的div标签
div.c1 查找class包含c1的div标签
玩法2
div #d1 查找div内部id是d1的后代标签
#d1>.c1 查找id是d1的内部class包含c1的儿子标签
5、伪类选择器
（1）概览
| 标签属性 | 含义 | 状态 |
|---|---|---|
| 元素/标签 : link | 向未被访问的链接添加样式 | 正常状态 |
| 元素/标签 : visited | 向已被访问的链接添加样式 | 访问过后状态 |
| 元素/标签 : hover | 当鼠标悬浮在元素上方时，向元素添加样式 | 鼠标放上状态 |
| 元素/标签 : active | 鼠标放在元素上面时，点击的一瞬间 | 激活状态 |
| input : focus | input框获取焦点(鼠标点击了input框) | 聚焦状态 |
（2）实例
<style>
a:link{/* 正常状态 */
color: #f00;/* 红 */
}
a:visited{/* 访问过后状态 */
color: #000;/* 黑 */
}
a:hover{/* 鼠标悬停状态 */
color: gold;/* 黄 */
}
a:active{/* 激活状态 */
color: #0f0;/* 绿 */
}
input:focus { /* input输入框获取焦点(input被选中) */
background-color: blue; /* 蓝 */
}
</style>
<body>
<a href="http://www.bilibili.com">哔哩哔哩</a>
<a href="http://www.douyu.com">斗鱼</a>
<a href="http://www.123.com">123</a>
<input type="text">
</body>
（3）a链接的属性实现顺序
- 超级链接的不同状态它其实是有顺序的，也就是说伪类选择器设置其实是有顺序的。如果不按照伪类选择器的顺序，那么样式就会失效。
顺序：要遵循 “爱恨法则” 要先有爱，才有恨。“love hate”。
- l ：link
- v：visited
- h：hover
- a：active
6、伪元素选择器
（1）使用方法
/*1.修改首个字体样式*/
p:first-letter {
color: red;
font-size: 48px;
}
/*2.在文本开头添加内容*/
p:before {
content: '哈哈';
color: blue;
}
/*3.在文本结尾添加内容*/
p:after {
content: '嘿嘿';
color: yellow;
}
（2）应用场景
-
before 和 after 通常都是用来清除浮动带来的影响，即父标签塌陷的问题
-
用于网站的内容防爬
三、基本选择器优先级
- 选择器相同，书写顺序不同
- 就近原则：谁离标签更近就选谁的
- 选择器不同...
- 行内 > id选择器 > 类选择器 > 标签选择器
- 选择器不同的情况下，精确度越高越有效
## 行内 > id选择器 > 类选择器 > 标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1 {
color: orange;
}
.c1 {
color: blueviolet;
}
p {
color: red;
}
</style>
<!-- <link rel="stylesheet" href="mycss.css">-->
</head>
<body>
<p id="d1" class="c1" style="color: blue">下一个更乖</p>
</body>
</html>
