一. 什么是标签选择器？
1.作用： 根据指定的标签名称，在当前界面中找到所有该名称的标签，然后设置属性。
2.格式
标签名称 {
属性:值;
}
3.注意点：
1）标签选择器选中的是当前界面中所有的的标签，而不能单独选中某一个标签。
2）标签选择器无论标签藏得有多深都能选中
3）只要是HTML中的标签就可以使用标签选择器（h/a/img/ul）
二. 标签选择器之 id 选择器
1.什么是id选择器 ： 根据指定的id名称找到对应的标签，然后设置属性。
2.格式
# id名称{
属性 : 值 ;
}
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>id选择器练习</title>
<style>
/*对body里面的id名称叫做box的盒子进行设置*/
#box{
width: 500px;
height: 300px;
color: skyblue;
}
</style>
</head>
<body>
<div id="box">
</div>
</body>
</html>
3.注意点
1）每个HTML标签都有一个属性叫做id，也就是说每个标签都可以设置id
2）在同一个界面中id的名称是不可以重复的。
3）在编写id选择器是一定要在前面加上一个#
4）id的名称只能由字母/数字/下划线组成，且id的名称不能以数字开头。
5）在企业开发中，一般情况下如果仅仅是为了设置样式。我们不会使用id，因为在前端开发中id是留给js使用的。
三. 标签选择器之类选择器
1.什么是类选择器？：根据指定的类名称找到对应的标签，然后设置属性。
2.格式：
.类名 {
属性 : 值 ;
}
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器练习</title>
<style>
/*对body里面的class名称叫做box的盒子进行设置*/
.box{
width: 500px;
height: 300px;
color: skyblue;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
3.注意点：
1）每一个HTML标签有一个属性叫做class，也就是每一个标签都可以设置类名。
2）在同一个界面中，class的名称是可以重复的。
3）在编写class选择器时，一定要在class名称前面加上.
4）类名的命名规则和id名称的规则一样。
5）类名就是专门给某个特定的标签设置样式的。
6）在HTML中每一个标签都可以多个类名。
-格式
<标签名称 class=“类名1 类名2”>
四. 标签选择器之后代选择器
1.什么是后代选择器？: 找到指定标签所有后代标签，设置属性。
2.格式
标签名称1 标签名称2{
属性:值;
}
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器练习</title>
<style>
/*游览器先找到class名称为box的div盒子，然后选中里面的所有p标签，既box里面的我是一个段落1，我是一个段落2，我是一个段落3，我是一个段落4都会被选中。*/
.box p{
font:italic bold 15px "新宋体";
}
</style>
</head>
<body>
<div class="box">
<div class="box1">
<p>我是一个段落2</p>
<div class="box2">
<p>我是一个段落1</p>
</div>
</div>
<div class="box1">
<p>我是一个段落3</p>
</div>
<div class="box1">
<p>我是一个段落4</p>
</div>
</div>
</body>
</html>
3.注意点：
1）后代选择器必须用空格隔开
2）后代不仅仅是儿子，还包括孙子/重孙子，只要最终是放在指定标签中
的都是后代。
3.后代选择器不积极可以使用标签名称，还可以使用其他选择器。
五. 子元素选择器
1.什么是子元素选择器：找到指定标签中所有特定的直接子元素，然后设置属性。
2.格式
标签名称1>标签名称2{
属性:值;
}
先找到名称叫做“标签名称1”的标签，然后在这个标签中查找所有直接子元素名称叫做“标签名称2”的元素。
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器练习</title>
<style>
/*游览器先找到class名称为box的div盒子，然后选中里面的所有p标签，既box里面的我是一个段落4会被选中，其他的p标签包裹的内容不会被选中。*/
.box p{
font:italic bold 15px "新宋体";
}
</style>
</head>
<body>
<div class="box">
<div class="box1">
<p>我是一个段落2</p>
<div class="box2">
<p>我是一个段落1</p>
</div>
</div>
<div class="box1">
<p>我是一个段落3</p>
</div>
<p>我是一个段落4</p>
</div>
</body>
</html>
3.注意点：
1）子元素选择器只会查找儿子，不会查找其他被嵌套的标签。
2）子元素选择器之间需要用>连接，并且不能有空格。
3）子元素选择器不仅仅可以使用标签名称，还可以使用其他选择器。
六. 交集选择器
1.什么是交集选择器？：给所有选择器选中的标签中，相交的那部分标签设置属性。
2.格式
选择器1选择器2{
属性:值;
}
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器练习</title>
<style>
/*游览器先找到所有的p标签，然后在找到class名为box1的p标签。然后看相交的那一部分，进行样式修改，即我是一个段落3，我是一个段落4会被修改样式，其他的不会被修改样式*/
p.box1{
font:italic bold 15px "新宋体";
}
</style>
</head>
<body>
<div class="box">
<p>我是一个段落1</p>
<p>我是一个段落2</p>
<p class="box1">我是一个段落3</p>
<p class="box1">我是一个段落4</p>
<p>我是一个段落5</p>
</div>
</body>
</html>
3.注意点：
1.选择器与选择器之间没有任何连接符号
2.选择器可以使用标签名称/id名称/class名称
3.交集选择器仅作为了解，企业开发过程中用的并不多。
七. 并集选择器
1.什么是并集选择器？：给所有选择器选中的标签设置属性。
2.格式
选择器1，选择器2{
属性:值;
}
3.注意点
1）选择器与选择器之间使用逗号连接。
2）选择器可以使用标签名称/id名称/class名称
八. 兄弟选择器
1.什么是兄弟选择器？
1）相邻兄弟选择器：给指定选择器后面仅跟着那个选择器设置属性
格式：
选择器1+选择器2{
属性:值;
}
2）注意点：
-相邻兄弟选择器必须通过+连接
-相邻兄弟选择器只能选中紧跟在其后的那个标签，不能选中被隔开的选择器。
2）通用兄弟选择器：给指定选择器后面所有的选择器设置属性
格式
选择器1~选择器2{
属性:值;
}
注意点：
1.通用兄弟选择器必须使用~连接
2.通用兄弟选择器选中的是指定选择器后面的某个选择器选中的所有标签，无论有没有被隔开，都可以选中。
九. 序选择器
1.CSS中新增的选择器最具有代表性的就是序选择器。
2.同级别的第几个
1）frist child 选中同级别中的第一个标签。
2）last child 选中同级别中的最后一个标签
3）nth-child(3) 选中同级别的第三个。
4）nth-last-child(n) 选中同级别的倒数第n个。
5）only-child 选中父元素中唯一的标签。
6）注意点：不区分类型。
3.同类型的第几个
1）frist-of-type 选中同类型的第一个标签。
2)frist-of-type 选中同类型的最后一个标签。
3）nth-of-type(n) 选中同类型的第n个标签。
4）nth-last-of-type(n) 选中同类型的倒数第n个标签。
5）only-of-type 选中同类型的唯一的一个。
4.奇偶数选择第几个
1）nth-child(odd) 选中同级别的奇数标签
2）nth-child(even) 选中同级别的偶数标签。
3）nth-of-type(odd) 选中同类型的奇数标签。
4）nth-of-type(even) 选中同类型的偶数标签。
5）nth-child（2n+0） 选中同类型的第2n个标签。
十. 属性选择器
1.什么是属性选择器？：根据指定的属性名称找到对应的标签，然后设置属性。
2.attribute
1)作用:根据指定的属性名称找到对应的标签，然后设置属性。
2)格式：
标签名称[属性名称]{
属性:值;
}
eg:p[id]{
}
3.attribute=value
1)作用 :根据指定的属性名称，并且属性的取值等于value，然后设置属性。
2）格式
标签名称[属性名称=value]{
属性:值;
}
最长使用于input标签
eg:input[type=password]{
属性:值;
}
十一. 通配符选择器
1.什么是通配符选择器？：给当前界面设置所有的标签
2.格式
*{
属性:值；
}
3.注意点
1）由于通配符选择器是设置界面上所有的标签，所以效果比较差，在企业开发的过程中，一般不会使用这个选择器。