为什么这行得通,并产生 :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>
我在这里错过了什么?
最佳答案
使用 --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>
https://stackoverflow.com/questions/60291471/
相关文章:
django - 使用 DjangoFilterConnectionField 时有没有办法删除边和
typescript - TypeScript 中的非破坏性类型断言
ruby-on-rails - jbuilder 空数组删除键
java - 当我使用 ContextHierarchy 时,没有类型为 'org.springfr
node.js - 如何以只读模式获取Draft js中的链接?
swift - 您可以将键盘快捷键绑定(bind)到 Xcode 中的换行吗?
html - 什么决定了 Firefox 中的滚动条是否有颜色?