使用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"，而其他情况则不显示，因为它们没有name属性。当使用.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>

Answer 2

这是因为css变量检测到最近的父变量。您可以使用全局选择器"*"进行覆盖

只在css 中使用

*{
--namevar: "fallback";
}

试试看。如果还有什么帮助的话。请随意问我。