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 也可能被滥用，造成性能浪费和代码冗余，因此在使用时还需谨慎权衡。