CSS - all 属性_CSS 菜鸟教程

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

<< CSS - min-content（最小内容）属性 CSS - inset（插图）属性 >>