一、标签选择器
1.结构：标签名 { css属性名：属性值； }，例如 div{color:red;}
2.作用：选择页面中对应的标签（找她），方便后续设置样式（改她）
3. 注意点： （1） 标签选择器选择的是一类标签，而不是单独某一个 （2） 标签选择器无论嵌套关系有多深，都能找到对应的标签二、类选择器
1.结构：.类名 { css属性名：属性值； } 2.作用：通过类名，找到页面中所有带有这个类名的标签，设置样式 3.注意点： （1）所有标签上都有class属性，class属性的属性值称为类名（类似于名字） （2）类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头 （3）一个标签可以同时有多个类名，类名之间以空格隔开 （4）类名可以重复，一个类选择器可以同时选中多个标签三、id选择器
1.结构：#id属性值 { css属性名：属性值； } 2.作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式 3.注意点： （1）所有标签上都有id属性 （2）id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的！ （3）一个标签上只能有一个id属性值 （4）一个id选择器只能选中一个标签四、通配符选择器
1.结构：* { css属性名：属性值； } 2.作用：找到页面中所有的标签，设置样式 3.注意点： （1）开发中使用极少，只会在极特殊情况下才会用到 （2）在基础班小页面中可能会用于去除标签默认的margin和padding补充：类与id的区别
1.class类名相当于姓名，可以重复，一个标签可以同时有多个class类名；id属性值相当于身份证号码，不可重复，一个标签只能有一个id属性值 2.类选择器以 . 开头 ；id选择器以 # 开头 3.id一般配合js使用，除非特殊情况，否则不要使用id设置样式 4.实际开发过程中类选择器用的最多。 5.实际开发中会遇到冗余代码的抽取 （可以将一些公共的代码抽取到一个公共的类中去）五、后代选择器
1. 选择器语法： 选择器1 选择器2 { css }；例如 .box a{color:red;} 2.作用：根据 HTML 标签的嵌套关系，选择父元素 后代中 满足条件的元素 3. 效 果： 在选择器1所找到标签的后代（儿子、孙子、重孙子…）中，找到满足选择器2的标签，设置样式 4.注意点： 后代包括：儿子、孙子、重孙子…… 后代选择器中，选择器与选择器之前通过 空格 隔开六、子代选择器
1. 选择器语法： 选择器1 > 选择器2 { css }；例如 .box>strong{color:pink;} 2.作用：根据 HTML 标签的嵌套关系，选择父元素 子代中 满足条件的元素 3.效 果： 在选择器1所找到标签的子代（儿子）中，找到满足选择器2的标签，设置样式 4.注意点： 子代只包括：儿子 ；子代选择器中，选择器与选择器之前通过 > 隔开七、并集选择器
1. 选择器语法： 选择器1 ， 选择器2 { css } 2.作用：同时选择多组标签，设置相同的样式 3.效 果： 找到 选择器1 和 选择器2 选中的标签，设置样式 4. 注意点： （1） 并集选择器中的每组选择器之间通过 , 分隔 （2） 并集选择器中的每组选择器可以是基础选择器或者复合选择器 （3） 并集选择器中的每组选择器通常一行写一个，提高代码的可读性八、交集选择器
1.选择器语法：选择器1选择器2 { css }
2.作用：选中页面中 同时满足 多个选择器的标签 3. 结果： （既又原则）找到页面中 既 能被选择器1选中， 又 能被选择器2选中的标签，设置样式 4. 注意点： （1） 交集选择器中的选择器之间是紧挨着的，没有东西分隔 （2） 交集选择器中如果有标签选择器，标签选择器必须写在最前面九、hover伪类选择器
1.选择器语法：选择器:hover { css }
2.作用：选中鼠标 悬停 在元素上的 状态 ，设置样式 4. 注意点： 伪类选择器选中的元素的 某种状态
十、结构为类选择器
1.原理：能够使用 结构伪类选择器 在HTML中定位元素 2.作用：根据元素在HTML中的结构关系查找元素( 根据html结构选择标签 ) 3.优势：减少对于HTML中类的依赖，有利于保持代码整洁( 选择方便,省去了很多类名 ) 4.场景：常用于查找某父级选择器中的子元素 5.伪类选择器权重为 0010(类选择器)
6.案例展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>结构伪类基本使用</title>
<style>
/* 1.选择奇数项的标签 */
ul li:nth-child(odd){
background-color: hotpink;
}
/* 1.选择偶数项的标签 */
ul li:nth-child(even){
background-color: pink;
}
/* 3.选择偶数 */
ul li:nth-child(2n){
background-color: blue;
}
/* 4.选择奇数 */
ul li:nth-child(2n+1){
background-color: skyblue;
}
/* 5.选择倍数标签 */
ul li:nth-child(5n){
background-color: green;
}
/* 6.从第五个开始一直到最后 */
ul li:nth-child(n+5){
background-color: red;
}
/* 7.选择前五个 */
ul li:nth-child(-n+5){
background-color: orange;
}
</style>
</head>
<body>
<ul>
<li>我是第1个li标签</li>
<li>我是第2个li标签</li>
<li>我是第3个li标签</li>
<li>我是第4个li标签</li>
<li>我是第5个li标签</li>
<li>我是第6个li标签</li>
<li>我是第7个li标签</li>
<li>我是第8个li标签</li>
<li>我是第9个li标签</li>
<li>我是第10个li标签</li>
</ul>
</body>
</html>
2.结构伪类选择器易错点
<!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>结构伪类易错点</title>
<style>
/* 怎样选中第一个li标签? */
ul li:first-child a{
background-color: pink;
}
/* 怎样选中第二个li标签? */
ul li:nth-child(2) a {
color: aqua;
}
/* 怎么选中倒数第三个标签？ */
ul li:nth-last-child(3) a{
background-color: blue;
}
</style>
</head>
<body>
<!-- ul>li*10>a{我是第$个a标签} -->
<ul>
<li><a href="#">我是第1个a标签</a></li>
<li><a href="#">我是第2个a标签</a></li>
<li><a href="#">我是第3个a标签</a></li>
<li><a href="#">我是第4个a标签</a></li>
<li><a href="#">我是第5个a标签</a></li>
</ul>
</body>
</html>
十一、链接伪类选择器
link 设置a对象在未被访问前的样式表属性。IE3将:link伪类的样式表属性作用于visited伪类。
为了确保生效，请按照 LVHA 的循顺序声明 :link－:visited－:hover－:active。
代码展示：
<!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>链接伪类选择器</title>
<style>
a{
text-decoration: none;
}
/* 1.未访问的状态 */
a:link{
color: red;
}
/* 2.被访问过的状态 */
a:visited{
color: green;
}
/* 3.鼠标悬停状态 */
a:hover{
color: orange;
font-weight: 700;
}
/* 4.鼠标点击不放开的状态 */
a:active{
color: purple;
}
</style>
</head>
<body>
<a href="#">链接伪类选择器的使用</a>
</body>
</html>
十二、焦点伪类选择器
焦点伪类选择器用于选中元素获取焦点时状态，常用于表单控件
E:focus{css属性}（E表示元素、标签）
代码展示：
<!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>焦点伪类选择器</title>
<style>
/* 用于选中元素获取焦点时状态，常用于表单控件
E:focus{css属性}
E表示元素(标签)
*/
/* 1.单选框被选中的状态 */
input:focus{
width: 200px;
height: 100px;
background-color: pink;
}
/* 2.复选框被选中的状态 */
input:checked{
width: 40px;
height: 40px;
}
</style>
</head>
<body>
<input type="text" name="" id="">
<hr>
<input type="checkbox">睡觉
<input type="checkbox">打游戏
<input type="checkbox">看剧
</body>
</html>
十三、属性选择器
属性选择器使用的[] 经验用于input标签,它是html标签的属性来选择元素
E[attr]{css属性}
E[attr="val"]{css属性}
attr表示属性的意思
val表示属性值的意思
伪类,类,属性选择器权重都是0010
代码展示：
<!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>属性选择器</title>
<style>
/*
属性选择器使用的[] 经验用于input标签,它是html标签的属性来选择元素
E[attr]{css属性}
E[attr="val"]{css属性}
attr表示属性的意思
val表示属性值的意思
伪类,类,属性选择器权重都是0010
*/
/* 1.选择input标签具有Type属性才能被选中 */
input[type] {
background-color: pink;
}
/* 2.选择input标签具有Type属性并且属性值为password才能被选中 */
input[type="password"]{
background-color: aqua;
}
</style>
</head>
<body>
<input type="text">
<input type="password" name="" id="">
</body>
</html>
效果展示：
