css - child :before content inheritance

Question

标题可能有点令人困惑，但我想知道为什么子元素不可能继承它的父 ::before 内容。例如:

HTML:

<div class="foo">
    <div class="baz"></div>
</div>

CSS:

.foo::before {
    content: 'bar';
}

.foo .baz::before {
    content: inherit;
}

我试过那样，甚至这样:

.foo > .baz::before {
    content: inherit;
}

还有这个:

.foo::before ~ .baz::before {
    content: inherit;
}

...以上都不起作用...这有可能吗？如果没有，我有哪些选择可以实现这一目标？

更新

我想我可能找到了一种方法来做这样的事情:

.foo {
    content: 'bar';
}

.foo > .baz,
.foo > .baz::before {
    content: inherit;
}

Answer 1

::before/::after伪元素不能继承自另一个::before/::after 伪元素。伪元素只能从其原始元素继承——这是伪元素附加到的元素。伪元素甚至不能从其原始元素 unless the originating element itself is also inheriting from its parent and the property involved is not content 的 parent 继承。 .

在您的示例中，.foo::before 只能从它所附加的 .foo 继承，同样适用于 .baz::before 和 .baz。 .baz::before 不能从 .foo::before 继承，所以你想做的事是不可能的。似乎没有一种可靠的方法来确保一个伪元素始终仅通过 CSS 继承另一个伪元素，而无需在标记本身中强制执行。