CSS all 属性重置元素的所有属性，但 unicode bidi、direction 和 CSS 自定义属性 除外。它可以将属性重置为其原始值或继承值，或重置为在另一个级联层或样式表原点中显式定义的值。
语法
all: initial | inherit | unset;
属性值
| 值 | 描述 |
|---|---|
| initial | 将应用于元素或其父元素的所有属性更改为其初始值。 |
| inherit | 将应用于元素或其父元素的所有属性更改为其父值。 |
| unset | 将应用于元素或其父元素的所有属性更改为其父值（如果它们是可继承的），否则更改为其初始值（如果不是） |
CSS All 属性示例
以下示例说明了具有不同值的 all 属性。
具有 initial 值的 all 属性
为了将元素的属性设置为浏览器分配的默认值，以便没有定义的样式适用于它们，我们使用初始值。以下示例显示了这一点。
<!DOCTYPE html>
<html>
<head>
<style>
html {
font-size: 25px;
color: lightcoral;
font-style: italic;
}
#custom1 {
background-color: #ecf0f1;
color: #e74c3c;
}
#custom2 {
all: initial;
}
</style>
</head>
<body>
<h2>CSS all 属性示例</h2>
<div id="custom1">
看看这个句子是怎么变的-这是参考句
</div><br/>
<div id="custom2">
看看这个句子是怎么变的。
这个句子使用了初始值，所以它没有从其父元素或html元素继承任何东西
这从文本样式和颜色中可以明显看出。
</div>
</body>
</html>
具有 Inherit 值的 all 属性
为了让元素的属性设置为元素的父元素或 html 元素的属性，我们使用 inherit 值。将应用父元素定义的属性（如果存在），否则将应用 html 元素属性。以下示例显示了这一点。
<!DOCTYPE html>
<html>
<head>
<style>
html {
font-size: 25px;
color: lightcoral;
font-style: italic;
}
#custom1 {
background-color: lightgreen;
font-weight: bold;
padding: 10px;
color: #e74c3c;
}
#custom2 {
all: inherit;
}
</style>
</head>
<body>
<h2> CSS all 属性示例</h2>
<div id="custom1">
看看这个句子是怎么变的-这是参考句。
</div><br/>
<div id="custom2">
看看这个句子是怎么变的。这个句子使用了继承值，
因此它继承了其父元素或html元素（在本例中为html元素）的属性。
它继承了字体大小、颜色和字体样式。
</div>
</body>
</html>
具有 Unset 值的 all 属性
要让元素的属性从其父元素（如果存在）或 html 元素（如果不存在）或从浏览器决定的默认值（行为类似于 initial）获取，如果两者都不存在，那么我们使用 unset 值。以下示例显示了这一点。
<!DOCTYPE html>
<html>
<head>
<style>
.parent {
color: purple;
font-weight: bold;
font-size: 20px;
text-align: center;
background-color: lightgrey;
}
.custom1 {
font-weight: bold;
padding: 10px;
}
.custom2 {
all: unset;
}
</style>
</head>
<body>
<h2>CSS all 属性示例</h2>
<div class="parent">
<div class="custom1">这个句子使用了“unset”值，并且也有父级，因此它继承了父级属性。
</div>
</div>
<br/>
<div class="custom2">这个句子也使用了“unset”值，但它没有父级，因此它遵循初始值获得默认值。
</div>
</body>
</html>
支持的浏览器
| 属性 |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| all | 37.0 | 79.0 | 27.0 | 9.1 | 24.0 |
