CSS样式的优先级(权重)

当使用不同的选择器选中同一个元素并设置相同样式时,这时样式间产生了冲突

最终采用的是哪个选择器?
由选择器的优先级(权重)决定,权重高的优先显示

优先级规则(多个按位置分别进行计算,不进位):

  • 内联样式:优先级 1,0,0,0
  • id选择器:优先级 0,1,0,0
  • 类和伪类:优先级 0,0,1,0
  • 元素选择器:优先级 0,0,0,1
  • 统配选择器:优先级 0,0,0,0
  • 继承的样式:没有优先级
  • 加了 !important 的样式:优先级无穷大

如果选择器的优先级一样,则使用靠后的样式(按前后顺序来,前面的被后面的覆盖了)

并集选择器的优先级是单独计算的

继承规则:

  • 子元素可以继承父元素设置的样式。
  • 子元素并不是全部样式。比如边框、高度等并不会继承。
  • 继承的规则没有权重
原文地址:https://www.cnblogs.com/wbyixx/p/12071269.html