选择器的权重

样式的继承

• 设置给祖先元素的样式，也会同时应用到其后代元素上
• 继承的存在大大的简化了样式的编写
  • 但并不是所有的样式都会发生继承
  • 所有的布局、背景、边框等相关的样式都不会发生继承

---

样式的冲突

• 当我们使用不同的选择器，选中一个元素并设置相同的样式时，就发生了样式的冲突

• 当样式冲突发生时，哪个样式生效由选择器的优先级（权重）决定：

  • 继承的样式：没有优先级
  • 通配选择器：0,0,0,0
  • 元素选择器：0,0,0,1
  • 类和伪类选择器：0,0,1,0
  • id选择器：0,1,0,0
  • 内联样式：1,0,0,0

• 比较优先级时，需要将多个选择器的优先级一起计算

  • 优先级高的优先显示，优先级的累加无法跨越数量级
  • 如果优先级一样，则优先显示靠下的
  • 如果为样式添加 !important,则该样式会获得最高的优先级，优先于其他样式显示，慎用！
  • 注意：分组选择器优先级都是单独计算的

    div.box1{} /* 0,0,1,1 */
    .box1{} /* 0,0,1,0 */