组合选择器
组合选择器(群组,子代,后代,相邻,兄弟交集选择器)
1、群组选择器
div, span, .red, #div {
color: red;
}
-
一次性控制多个选择器
-
选择器之间以,隔开,每一个选择器位均可以为任意合法选择器或选择器组合
2、子代(后代)选择器
子代选择器用>连接
body > div {
color: red;
}
后代选择器用空格连接
.sup .sub {
color: red;
}
-
一次性控制一个选择器(逻辑最后的那个选择器),前置位的选择器为修饰性选择器
-
每一个选择器位均可以为任意合法选择器或选择器组合
-
子代选择器必须为一级父子嵌套关系,后代选择器可以为一级及多级父子嵌套关系
3、相邻(兄弟)选择器
相邻选择器用+连接
.d1 + .d2 {
color: red;
}
兄弟选择器用~连接
.d1 ~ .d3 {
color: red;
}
-
一次性控制一个选择器(逻辑最后的那个选择器),前置位的选择器为修饰性选择器
-
每一个选择器位均可以为任意合法选择器或选择器组合
-
相邻选择器必须为直接相邻关系,兄弟选择器可以为直接相邻或间接相邻关系
div.d#dd { color: red; } .d1.d2.d3 { color: red; }
4、交集选择器
四、组合选择器优先级
- 组合选择器优先级与权值相关,权值为权重和
- 权重对应关系
选择器 权重
通配 1
标签 10
类、属性 100
id 1000
!important 10000
- 选择器权值比较,只关心权重和,不更新选择器位置
- 不同级别的选择器间不具备可比性:1个类选择器优先级高于n个标签选择器的任意组合
五、属性选择器
- [attr]:匹配拥有attr属性的标签
- [attr=val]:匹配拥有attr属性,属性值为val的标签
- [attr^=val]:匹配拥有attr属性,属性值以val开头的标签
- [attr$=val]:匹配拥有attr属性,属性值以val结尾的标签
- [attr*=val]:匹配拥有attr属性,属性值包含val的标签