浅谈CSS继承及优先级

364 阅读2分钟

继承是很有用的机制,有了它就可以避免给一个元素的所有后代重复应用相同的样式。如果你要设置的属性是一个继承属性,那么应该考虑是否直接设置到父元素上。

优缺点: 合理的使用继承,有助于减少选择符的数量,降低复杂性。 不过,如果有大量的元素继承了各种不同的样式,那么查找样式的来源也会比较麻烦。

不可继承的: display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、page-bread-before和unicode-bidi

内联元素可继承: letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction

终端块状元素可继承: text-indent和text-align

列表元素可继承: list-style、list-style-type、list-style-position、list-style-image

表格元素可继承: border-collapse

所有元素可继承: visibility和cursor

继承中的特殊:

  1. a标签的字体颜色不能被继承
  2. < h1 > ---- < h6 >标签字体的大小不能被继承

因为他们都是一个默认值

继承的属性值没有特殊性,连 0 都说不上。这意味着使用特殊性为 0 的通用选择符( * )设置的样式都可以覆盖继承的样式。

优先级: !important > 内联样式 > ID选择器 > 类选择器 = 伪类选择器 = 属性选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

元素选择符的权值: 元素标签(派生选择器):1 ;class选择符:10; id选择符:100; 内联样式权值最大,为1000

优先级就近原则,同权重情况下样式定义最近者为准!