选择器的优先级

组合选择器(群组,子代,后代,相邻,兄弟交集选择器)

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

​
四、组合选择器优先级
​

• 组合选择器优先级与权值相关，权值为权重和
• 权重对应关系
  ​
  选择器 权重
  通配 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的标签