为什么作用域 CSS 自定义属性无法覆盖继承值？

作用域 CSS 自定义属性：覆盖继承值

使用 CSS 自定义属性时，定义它们的作用域会影响其行为。在这种情况下，作用域自定义属性用于根据外部作用域中定义的变量来缩放大小。然而，并没有达到预期的效果，因为所有三个列表都以相同的比例显示。

理解范围问题

用 -- 定义的自定义属性不是嵌套在其他规则中的规则被视为全局范围的，并影响文档中的所有元素。但是，当在嵌套规则中定义自定义属性时，它的作用域将限于该规则及其后代。这意味着该规则之外的任何元素都不会继承自定义属性的值。

重置自定义属性

在提供的代码中，根元素定义 - -scale 自定义属性并根据它计算 --size-* 值。随后，子元素定义自己的 --scale 自定义属性。这会导致子元素覆盖从根元素继承的 --scale 值。

要解决此问题，需要将子元素中的 --scale 自定义属性重置为新值，该值将在用于计算。通过这样做，自定义属性的范围有效地限定为子元素及其后代。

更新的代码

以下是包含修复的代码的更新版本：

:root {
  --size-1: calc(1 * var(--scale, 1) * 1rem);
  --size-2: calc(2 * var(--scale, 1) * 1rem);
  --size-3: calc(3 * var(--scale, 1) * 1rem);
}

.size-1 { font-size: var(--size-1) }
.size-2 { font-size: var(--size-2) }
.size-3 { font-size: var(--size-3) }

.scale-1x { --scale: 1 }
.scale-2x { --scale: 2 }
.scale-3x { --scale: 3 }

html {
  font: 1em sans-serif;
  background: papayawhip;
}

ol {
  float: left;
  list-style: none;
  margin: 1rem;
}

以上是为什么作用域 CSS 自定义属性无法覆盖继承值？的详细内容。更多信息请关注PHP中文网其他相关文章！