我想设置一个 data-index
父元素在其(嵌套)子元素之一上的值。预期结果:字符串“index”应该出现在 h2.heading
周围.
标记:
<div class="foo" data-index="index">
<div>
<h2 class="heading"><span>title</span></h2>
</div>
</div>
CSS(第一个
data-index
规则有效 - 但不在正确的位置):div.foo[data-index] .heading span {
display: none;
}
div.foo[data-index]::after {
content: attr(data-index);
color: green;
}
div.foo[data-index] .heading::after {
content: attr(data-index);
color: red;
border: 1px solid red;
}
http://codepen.io/anon/pen/jyxdoz
最佳答案
更新
解决方法可能是直接在 html 元素上设置 CSS 变量并使用它。
div.foo[data-index] .heading span {
display: none;
}
div.foo[data-index] .heading::after {
content: var(--index);
color: red;
border: 1px solid red;
}
<div class="foo" style="--index:'test';" data-index>
<div>
<h2 class="heading"><span>title</span></h2>
</div>
</div>
原版
当前无法完成(如前所述
attr
仅适用于当前元素)。以后,当
attr()
可以用于除 content
之外的属性,结合 css 变量,你可以这样做div.foo[data-index] .heading span {
display: none;
}
div.foo[data-index] {
--data: attr(data-index);
--index: var(--data);
}
div.foo[data-index] .heading::after {
content: var(--index);
color: red;
border: 1px solid red;
}
<div class="foo" data-index="index">
<div>
<h2 class="heading"><span>title</span></h2>
</div>
</div>
关于css - 使用 CSS3 attr 函数在子项中使用父项的属性值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42034739/