CSS 选择器
选择器的作用
能够选择找到页面中对应的标签，以供后续修改设置样式
基础选择器
标签选择器
语法：标签名 { css属性名：属性值； }
作用：通过html标签名字，可以选择到页面中所有此名字的标签
注意点：1. 标签选择器选择的是一类标签，而不是单独某一个
- 标签选择器无论嵌套关系有多深，都能找到对应的标签
类选择器
语法： .类名 { css属性名：属性值； }
作用：通过html标签中类名进行选择，可以选择到页面中所有此类名的标签
注意点： 1. 所有标签上都有class属性，class属性的属性值称为类名（类似于名字）
类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头
一个标签可以同时有多个类名，类名之间以空格隔开
类名可以重复，一个类选择器可以同时选中多个标签
id选择器
语法： #id属性值 { css属性名：属性值； }
作用：通过查找html标签中的id属性，找到带有此id的标签
注意点：1. 所有标签上都有id属性
id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的！
一个标签上只能有一个id属性值
一个id选择器只能选中一个标签
类和id选择器的区别
class类名与id属性值的区别
1.class类名相当于姓名，可以重复，一个标签可以同时有多个class类名
2.id属性值相当于身份证号码，不可重复，一个标签只能有一个id属性值
类选择器与id选择器的区别
1.类选择器以 . 开头
2.id选择器以 # 开头
实际开发的情况
1.类选择器用的最多
2.id一般配合js使用，除非特殊情况，否则不要使用id设置样式
3.实际开发中会遇到冗余代码的抽取 （可以将一些公共的代码抽取到一个公共的类中去）
通配符选择器
语法： ***** { css属性名：属性值； }
作用：直接找到选中页面中所有标签
注意点：1.开发中极少使用
2.常用于页面中样式初始化
复合选择器
后代选择器
语法：选择器1 选择器2 { css } //选择器之间用空格隔开
作用：在选择器1所找到标签的后代（儿子、孙子、重孙子…）中，找到满足选择器2的标签，然后设置样式
注意点：1. 后代包括：儿子、孙子、重孙子……
- 后代选择器中，选择器与选择器之前通过 空格 隔开
子代选择器
语法：选择器1 > 选择器2 { css }
作用：根据 HTML 标签的嵌套关系，选择父元素 子代（儿子）中 满足条件的元素
注意点：1. 子代只包括：儿子
- 子代选择器中，选择器与选择器之前通过 > 隔开
交集选择器
语法：选择器1选择器2 { css }
作用：（既又原则）找到页面中 既 能被选择器1选中，又 能被选择器2选中的标签，设置样式
注意点: 1. 交集选择器中的选择器之间是紧挨着的，没有东西分隔
- 交集选择器中如果有标签选择器，标签选择器必须写在最前面
hover伪类选择器
语法：选择器 :hover { css }
作用：设置鼠标悬停时的样式
注意点：伪类，权重按照类选择器来计算
总结：
1.开发中更多使用复合选择器，以达到精准选择的效果
2.选择器的选择视实际开发场景进行选择，需要注意权重计算
