CSS @property - inherits

如果使用 `@property` at-rule，则必须包含 CSS 描述符 `inherits`。

它决定了 `@property` 定义的自定义属性注册默认是否继承。

可能的值

true - 属性默认继承。
false - 属性默认不继承。

语法

inherits = true | false

CSS inherits - border-color

以下代码是 `inherits` 描述符的示例。

在以下使用 `@property` 的示例中，该描述符定义了一个自定义属性 `--theme-color`，并配置为 `inherits: true;`。
这允许定义的 `--theme-color` 在整个 DOM 层次结构中继承其值，确保 `.container` 内的元素继承此属性的文本和背景颜色。
指定的 `--theme-color` 被 `.title`、`.text` 和 `.nested-text` 元素继承，确保嵌套结构中的文本颜色和背景保持一致。

<html>
<head>
<style>
   @property --theme-color {
      syntax: '<color>';
      inherits: true; /* Specifies that this property should inherit its value */
      initial-value: black; /* Default color if not explicitly set */
   }
   /* Apply the custom property to style elements */
   .container {
      --theme-color: red; /* Set a custom color for the container */
   }
   .title,
   .text,
   .nested-text {
      color: var(--theme-color); /* Inherit theme color for text */
      background-color: #f7f7f7; /* Set a light background color */
      padding: 10px;
      margin: 5px 0;
   }
   .title {
      font-size: 24px;
   }
</style>
</head>
<body>
   <div class="container">
      <div class="header">
         <h1 class="title">Custom Properties Example</h1>
      </div>
      <div class="content">
         <p class="text">This text inherits the theme color for text and background.</p>
         <div class="nested">
         <p class="nested-text">Nested text inherits the same theme color!</p>
         </div>
      </div>
   </div>
</body>
</html>

打印页面