使用 attr() 更新 CSS 个变量

Question

为什么这行得通，并产生 :before 并显示 "changed"

:root {
    --namevar: "fallback";
}

.in[name] {
    --namevar: "changed";
}

.in dd:first-of-type:before {
    font-weight: bold;
    display: block;
    content: var(--namevar);
}

但是如果改成这样，:before就没了？

.in[name] {
    --namevar: attr(name);
}

这些都不起作用：

.in dd:first-of-type:before {
    content: attr(name, inherit);
}

.in[name] dd {
    name: inherit;
}

HTML 看起来像：

<div class="in" name="this">
    <dd>one</dd>
    <dd>two</dd>
    <dd>three</dd>
</div>

我在这里错过了什么？

Answer 1

这是因为您的 css 变量检测到最近的父变量。您可以使用全局选择器“*”

覆盖

只需在 css

中使用

*{
    --namevar: "fallback";
}

试试吧。如果有更多帮助。随时问我。

Answer 2

--namevar: attr(name); 的使用效果很好，但您需要了解它的工作原理。

示例：

:root {
    --namevar: "fallback";
}


.in dd:before {
    font-weight: bold;
    content: var(--namevar);
}

.in[name] {
    --namevar: attr(name);
}

<div class="in" name="this">
    <dd>one</dd>
    <dd name="ok ">two</dd>
    <dd>three</dd>
</div>

请注意在第二种情况下我们如何显示 "Ok" 而对于其他情况什么都不显示，因为它们没有名称属性。使用 .in[name] {--namevar: attr(name);} 并不意味着获取属于 .in 的 name 属性的值并将其存储在变量中。这意味着变量的值是 attr(name) 而已。我们仅在使用变量时解析该值，在您的情况下，它在 dd 内部使用，因此我们考虑 dd.

的属性名称（如果存在）

换句话说，您不能使用 CSS 变量来存储元素属性的值并稍后在任何子元素中使用它。您可以做的是保留您的初始示例，而不是您考虑 CSS 变量的属性，如下所示：

:root {
    --namevar: "fallback";
}


.in dd:before {
    font-weight: bold;
    content: var(--namevar);
}

<div class="in" style="--namevar:'this '">
    <dd>one</dd>
    <dd name="ok">two</dd>
    <dd>three</dd>
</div>

使用 attr() 更新 CSS 个变量

Updating CSS variables with attr()

css

css-variables