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

列印頁面