CSS被遗忘的继承

100人浏览 2024-09-20 08:33:26

许多人在抱怨 CSS 为什么不单单提供一个全局作用域，但如果它这么做的话，那么就会有很多重复样式了。反之，CSS 有全局作用域和局部作用域。就像在 JavaScript 里，局部作用域有权限访问父级和全局作用域，而在 CSS 里，局部作用域则帮助了继承。

近年来 CSS的变量系统已逐步得到各大浏览器厂商支持，自定义选择器等强势袭来，嵌套系统/模块系统也在路上... 了解使用一些CSS的深层次的特性不仅可以让我们的布局变得更加稳定还可以减少我们的很大的代码量比如 CSS的继承、层叠

属性是否默认继承

CSS 的继承分为默认继承的和默认不继承的，但所有属性都可以通过设置 inherit 实现继承

当没有指定值时，如这些语句的值都是默认值也是初始值：background-color: transparent、left: auto 、float: none、width: auto 等。默认继承的属性取父元素的同属性的计算值（相当于设置了 inherit ），默认不继承的属性取属性的初始值（相当于设置了 initial ）。

默认继承的 ("Inherited: Yes") 的属性：

所有元素默认继承：visibility、cursor
内联元素默认继承：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

默认不继承的("Inherited: No") 的属性：

文本属性默认不继承：vertical-align、text-decoration、text-shadow、white-space、unicode-bidi
盒子属性默认不继承：display、width、height、padding、margin、border、min-width、min-height、max-width、max-height、overflow、clip
背景属性默认不继承：background、background-color、background-image、background-repeat、background-position、background-attachment
定位属性默认不继承：float、clear、position、top、right、bottom、left、z-index
内容属性默认不继承：content、counter-reset、counter-increment
轮廓属性默认不继承：outline-style、outline-width、outline-color、outline
页面属性默认不继承：size、page-break-before、page-break-after
声音属性默认不继承：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during

一般涉及到文本相关的属性，都是默认继承的，毕竟 CSS的初衷就是为了更好的在网页上呈现文字。

需要注意的是，部分属性的默认值是会根据元素的 display 属性的值而计算的，比如 vertical-align 属性，如果是 display: inline 元素，则其计算值为基线对齐 vertical-align: baseline ，如果是 display: inline-block 元素，则其计算值为 vertical-align: bottom

CSS为控制继承提供了四个特殊的通用属性值（属性 revert 只有很少的浏览器支持，所以实际上是三个），每个 CSS 属性都能使用这些值。