为什么我的嵌套 CSS 作用域自定义属性被忽略？

嵌套声明中忽略 CSS 作用域自定义属性

在 CSS 中定义自定义属性时，必须了解作用域如何影响其评估。作用域自定义属性仅在定义它们的元素或组件中本地可用。然而，当尝试在外部作用域中使用作用域自定义属性时，会出现一个常见的挑战。

在这种特定情况下，目标是通过自定义属性定义比例因子并将其应用于不同的元素。但是，如所示，无论应用的缩放类如何，所有列表元素都会同等缩放。

要解决此问题，请务必注意自定义属性是从上到下评估的。当在根级别定义自定义属性时，如本例所示，嵌套元素中相同属性的任何后续定义都将被忽略。

考虑这个简化的插图：

:root {
  --color: var(--c, blue);
}

span {
  color: var(--color);
}

此处，自定义属性 --color 是在根级别定义的。如果我们尝试在 span 元素内覆盖它：

<div>
  <div class="box">
    <span><p>具有嵌套 CSS 声明的 span 元素不会变成红色。这是因为自定义属性已经在根级别进行了评估，将 --color 设置为蓝色，并且覆盖尝试将被忽略。</p>
<p>相反，具有继承的 --c: red 的 span 元素将变成红色，因为它从其父元素继承了自定义属性值。</p>
<p>为了达到所需的效果，有必要确保在每个嵌套组件中单独评估自定义属性。这可以通过在每个类或组件中本地定义属性来完成，而不是在根级别定义属性。</p></span>
</div>
</div>

以上是为什么我的嵌套 CSS 作用域自定义属性被忽略？的详细内容。更多信息请关注PHP中文网其他相关文章！