三大特性

层叠性

概念

给同一个标签设置相同的样式,此时样式会层叠覆盖,只有写在最后的样式会生效(遵循的原则是就近原则)。

注意

当样式冲突时,只有当选择器的优先级相同时,才能通过层叠性判断结果。

继承性

概念

元素会自动继承其父元素,或其祖先元素上所设置的某些样式

规则

优先继承离得近的。

常见的可继承属性

text-,font-,line-这些元素开头的可以继承,以及color属性

恰当地使用继承可以简化代码,降低 CSS 样式的复杂性。

继承失效的特殊情况

如果元素有浏览器默认样式,此时继承性依然存在,但是优先显示浏览器的默认样式。

  • a标签的color会继承失效

    color属性被浏览器默认设置的样式给覆盖了

  • h系列标签的font-size会继承失效

    font-size属性被浏览器默认设置的样式给覆盖了

  • div的高度不能继承,但是宽度有类似于继承的效果

    宽度属性不能被继承,但是div有独占一行的特性

优先级

优先级特性

不同的选择器具有不同的优先级,优先级高的选择器样式会覆盖优先级低的选择器样式。

!important > 行内样式 > ID选择器 > 类选择器 > 元素选择器 > * > 继承的样式

注意
  • !important 写在属性值的后面,分号的前面。
  • !important 并不能提升继承的优先级,只要是继承,优先级就是最低的。
  • 实际开发中不建议使用 !important