CSS all 属性
CSS all 属性
all
属性是 CSS3 中新增的一个属性,它允许将所有可用的 CSS 属性应用于一个元素上。可以视为综合应用了常见的 display
、position
、float
、visibility
、opacity
五个属性。
语法
all
属性语法如下:
/* Keyword values */
all: initial;
all: inherit;
all: unset;
all: revert;
all: none;
all: all;
/* Global values */
all: inherit;
all: initial;
all: unset;
initial
:将all
属性还原至初始值。inherit
:将all
属性继承自父元素。unset
:指定一个all
属性值,其继承自父元素或被重载。revert
:将all
属性还原为继承自样式表级别父元素的属性值,或者初始值。none
:不使用任何 CSS 属性。all
:应用所有 CSS 属性。
用法示例
全部应用
.all {
all: all;
}
上述代码会将所有的 CSS 属性应用到元素 .all
上。
继承父元素属性
.parent {
border: 1px solid #ccc;
}
.child {
all: inherit;
background: #f5f5f5;
}
上述代码中,.child
元素继承了.parent
元素的 border
属性,同时还应用了 background
属性。
还原至初始值
.revert {
all: revert;
display: flex;
}
上述代码中,.revert
元素的 all
属性还原至样式定义的父元素属性的值,也就是包括 display: block
在内的属性都被还原。
其他用法
.none {
all: none;
color: #333;
}
.unset {
all: unset;
font-size: 16px;
}
在上述代码中,all: none
会将所有 CSS 属性都赋值为默认值,因此在 .none
元素样式中只有 color
属性是被应用的。all: unset
则会使用一个初始值,但被后面的 font-size: 16px
覆盖,并成功应用到 .unset
元素上。
总结
all
属性可以方便地控制 CSS 屬性对 HTML 元素的影响,可以用于快速覆盖所有父元素上的样式。但是,all
也可能被滥用,造成性能浪费和代码冗余,因此在使用时还需谨慎权衡。