css - 使用 attr() 更新 CSS 变量

Question

为什么这行得通，并产生 :before 并显示“已更改”

: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

使用 --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>