CSS all 属性-之路教程

CSS all 属性

除了控制文本方向的 unicode-bidi 和 direction 之外， all 属性重置所选元素的所有属性。

此属性被视为速记属性，因为我们可以立即控制 CSS 属性的值。
但是没有 all 属性的普通版本，也没有子属性。

初始值	none
应用于	所有元素。
继承	无效
Animatable	无效
版本	CSS3
DOM 语法	object.style.all=“inherit”；

语法

all: initial | inherit | unset | revert;

all 属性的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        background-color: #8ebf42;
        color: #666;
        all: revert;
      }
    </style>
  </head>
  <body>
    <h2>All property example</h2>
    <p>这里设置了all: revert;</p>
    <div class="example">外向的人是一个友好的人，喜欢与他人交谈和相处。 外向者喜欢聚会、调用和结识新朋友。 </div>
  </body>
</html>

结果

具有四个值的 all 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        font-size: 15px;
        color: #1c87c9;
      }
      .example1 {
        background-color: #8ebf42;
        color: #666;
      }
      .example2 {
        background-color: #8ebf42;
        color: #666;
        all: inherit;
      }
      .example3 {
        background-color: #8ebf42;
        color: #666;
        all: initial;
      }
      .example4 {
        background-color: #8ebf42;
        color: #666;
        all: unset;
      }
    </style>
  </head>
  <body>
    <h2>All property example</h2>
    <hr>
    <p>No all property:</p>
    <div class="example1"> 愿你三冬暖 愿你春不寒 愿你天黑有灯 下雨有伞愿你路上有良人相伴</div>
    <hr>
    <p>all: inherit:</p>
    <div class="example2"> 愿你三冬暖 愿你春不寒 愿你天黑有灯 下雨有伞愿你路上有良人相伴 </div>
    <hr>
    <p>all: initial:</p>
    <div class="example3"> 愿你三冬暖 愿你春不寒 愿你天黑有灯 下雨有伞愿你路上有良人相伴</div>
    <hr>
    <p>all: unset:</p>
    <div class="example4"> 愿你三冬暖 愿你春不寒 愿你天黑有灯 下雨有伞愿你路上有良人相伴</div>
    <hr> 
  </body>
</html>

CSS all 属性值说明

值	说明
initial	使属性使用其默认值。
inherit	从其父元素继承属性。
unset	将应用于元素或者元素父级的所有属性更改为它们的父级值（如果它们是可继承的），或者更改为它们的初始值（如果不是）。
revert	指定依赖于声明所属的样式表原点的行为。

日期：2020-06-02 22:14:15 来源：oir作者：oir

←CSS align-self 属性

CSS animation-play-state 属性→

语法

all 属性的示例：

结果

具有四个值的 all 属性示例：

CSS all 属性值说明

目录