前端必知：11.css选择器的使用以及选择器的优先级
目录
一，基础选择器
1.通配选择器 （权重最低）
2.标签名选择器
3.类名选择器
4.id选择器（权重最高）
5.群组选择器
二.层次选择器
1.后代选择器
2.父子选择器
3.兄弟选择器
4.相邻兄弟选择器
三,伪类选择器
link:初始时候的状态
visited：点击之后的状态
hover：鼠标悬浮时候的状态
active：鼠标点击时候的状态（鼠标按下不松手）
顺序 l-> v -> h -> a (先爱后恨)
四，选择器的优先级
什么时候需要考虑选择器的优先级？
选择器优先级的强弱顺序：
1.!important 100000
2.行间样式，在标签上添加 style属性 10000
3.id选择器 1000
4.类名选择器，伪类选择器，属性选择器 100
5.（标签名）元素选择器，伪元素 10
6.通配符选择器 1
7.系统默认提供的css属性 0
一，基础选择器
1.通配选择器 （权重最低）
* 表示通配符，它可以匹配任何标签
使用方式
*{
css内容
}
2.标签名选择器
E{css内容}给所有标签名为E的元素设置css样式
3.类名选择器
.类名{css内容} 使用的时候需要在标签上绑定 class="类名"如果有多个
类名，使用 空格 隔开，类名最好不要超过5个
4.id选择器（权重最高）
#id名{css内容}
在一个页面中，id是唯一的，只能绑定在一个标签上，也就是一个页面中
没有同名的id
5.群组选择器
如果多种选择器所表达的css内容是相同的，则可以把他们写成群组选择器
.wp,#abc,div{css内容}
基础选择器
木兰诗
关山度若飞
寒光照铁衣
木兰不用尚书郎
可汗大点兵
二.层次选择器
1.后代选择器
E m { css内容 } 通过E选择器 设置 E中的 m 选择器 的css内容，m可以是E的
子级，也可以是E的后代中的某一个选择器
2.父子选择器
E>M {css内容} 通过E选择器找到 E选择器的子级M选择器，设置css内容
3.兄弟选择器
E~M{css内容}通过E选择器找到 该元素之后所有选择器名为M的兄弟元素，并
设置css样式
4.相邻兄弟选择器
E+M{css内容} (后面跟的只能是相邻的东西，不能是class名)过E选择器找到 该元素
之后第一个兄弟元素M，并且对M设置css样式
层次选择器
- 世上无难事
- 世上无难事
- 世上无难事
- 世 上无难事
- 世上无难事
- 世上无难事
- 世上无难事
- 世上无难事
- 世上无难事
- 世上无难事
三,伪类选择器
a的伪类，伪类是css系统创建好的内部的类，用来对标签的某个时机设置样式
link:初始时候的状态
visited：点击之后的状态
hover：鼠标悬浮时候的状态
active：鼠标点击时候的状态（鼠标按下不松手）
顺序 l-> v -> h -> a (先爱后恨)
ie8以后，任何标签都可以添加 ：hover 伪类
可以根据hover 触发 元素本身，以及通过元素能找到的元素的变化
伪类选择器
数鸭子
显示和隐藏 同行十二年不知木兰是女郎
不知木兰是女郎
图片
四，选择器的优先级
什么时候需要考虑选择器的优先级？
不同的选择器，同时作用于同一个标签元素，并且他们具有相同的
css属性设置，对该css属性设置不同的值。
选择器优先级的强弱顺序：
1.!important 100000
2.行间样式，在标签上添加 style属性 10000
3.id选择器 1000
4.类名选择器，伪类选择器，属性选择器 100
5.（标签名）元素选择器，伪元素 10
6.通配符选择器 1
7.系统默认提供的css属性 0
假设后面的数字是权重的值，那么在比较的时候，只需把选择器的值
相加，然后比较大小即是权重的大小。
如果他们的值相同，后来者居上（后面覆盖前面）
选择器优先级
归来见天子
归来见天子
归来见天子