css组合选择器 , 优先级

一. 组合选择器

• 特性 : 每一个选择器位均可以为任意合法选择器或选择器组合

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;
}

• 一次性控制一个选择器(逻辑最后的那个选择器)，前置位的选择器为修饰性选择器
• 每一个选择器位均可以为任意合法选择器或选择器组合
• 相邻选择器必须为直接相邻关系，兄弟选择器可以为直接相邻或间接相邻关系

4、交集选择器

div.d#dd {
    color: red;
}


.d1.d2.d3 {
    color: red;
}

5. 属性选择器

属性选择器权重 == class选择器权重

• [attr]：匹配拥有attr属性的标签
• [attr=val]：匹配拥有attr属性，属性值为val的标签
• [attr^=val]：匹配拥有attr属性，属性值以val开头的标签
• [attr$=val]：匹配拥有attr属性，属性值以val结尾的标签
• [attr*=val]：匹配拥有attr属性，属性值包含val的标签

属性以什么开头: ^= 
属性以什么结尾: $= 
属性模糊匹配: *= 

二. 组合选择器优先级

• 同目录结构下
  1.子代与后代优先级相同
  body > div == body div
  2.相邻与兄弟优先级相同
  div + span == div ~ span
  3.最终样式采用逻辑后的样式值
• 不同目录结构下
  注:控制的是同一目标,才具有可比性
  1.根据选择器权值进行比较
  2.权值为标签权重之和
  3.权重: *:1 div:10 class:100 id:1000 !important:10000
  4.权值比较时,关心的是值大小,不关心位置与具体选择器名
  5.id永远比class大,class永远比标签大

权重对应关系

选择器	权重
通配	1
标签	10
类、属性	100
id	1000
!important	10000