CSS - all 属性

CSS all 属性重置元素的所有属性，但以下属性除外：unicode bidi、direction 和 CSS 自定义属性。它可以将属性重置为其原始值或继承值，也可以重置为在另一个级联层或样式表源中显式定义的值。

语法

all: initial | inherit | unset;

属性值

值	描述
initial	它将应用于元素或其父元素的所有属性更改为其初始值。
inherit	它将应用于元素或其父元素的所有属性更改为其父元素的值。
unset	如果属性可继承，则将其更改为父元素的值；如果不可继承，则更改为其初始值。

CSS all 属性示例

以下示例说明了使用不同值的 all 属性。

使用 initial 值的 all 属性

要使元素的属性设置为浏览器分配的默认值，以便没有定义的样式适用于它们，我们使用 initial 值。这在以下示例中显示。

示例

<!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 property
   </h2>
   <div id="custom1">
      See how this sentence changes!- 
      This is reference sentence
   </div><br/>
   <div id="custom2">
      See how this sentence changed. This sentence 
      is using initial value so it does not inherit
      anything from its parent element or html element,
      this is evident from the text style and color.
   </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 property
   </h2>
   <div id="custom1">
      See how this sentence changes!- 
      This is reference sentence
   </div><br/>
   <div id="custom2">
      See how this sentence changed. This sentence
      is using inherit value so it inherits the properties
      from its parent or from the html element, in this 
      case the html element. It has inherited font-size, 
      color and font-style.
   </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 property
   </h2>
   <div class="parent">
      <div class="custom1">
         This sentence is using the 'unset' value and also
         has a parent, so it inherits the parent properties.
      </div>
   </div>
   <br/>
   <div class="custom2">
      This sentence is also using the 'unset' value but it
      doesnt have a parent, so it follows the initial value
      getting default values.
   </div>

</body>

</html>

支持的浏览器

属性
all	37.0	79.0	27.0	9.1	24.0

打印页面