前端学习笔记之CSS选择器

阅读目录

​​一 基本选择器​​

​​二 后代选择器、子元素选择器​​

​​三 兄弟选择器​​

​​四 交集选择器与并集选择器​​

​​五 序列选择器​​

​​六 属性选择器​​

​​七 伪类选择器​​

​​八 伪元素选择器​​

​​九 CSS三大特性​​

1、id选择器

示例

2、类选择器

id选择器vs类选择器

3、标签选择器

4、通配符选择器

1、后代选择器

2、子元素选择器

后代选择器vs子元素选择器

1、相邻兄弟选择器，CSS2推出

2、通用兄弟选择器，CSS3推出

1、交集选择器

2、并集选择器

示例：同级别

示例:同级同类型

示例：其他

1、继承性

2、层叠性

3、优先级

1、大前提：直接选中 > 间接选中(即继承而来的)

2、如果都是间接选中，那么谁离目标标签比较近，就听谁的

3、如果都是直接选中，并且都是同类型的选择器，那么就是谁写的在后面就听谁的

4、如果都是直接选中，并且是不同类型的选择器，那么就会按照选择器的优先级来层叠

    id > 类 > 标签 > 通配符(也算直接选中) > 继承 > 浏览器默认（即没有设置任何属性）

示范 

5、优先级之!important

6、优先级之权重计算