Children :内容继承前

Question

标题可能有点令人困惑，但我想知道为什么 child 元素不可能继承它的 parent ::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;
}

...和 none 上面的工作...有可能吗？如果没有，我有哪些选择可以实现这一目标？

更新

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

.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 单独继承另一个伪元素，而不在标记本身中强制执行此操作。

Children :内容继承前

Children :before content inheritance

css

pseudo-element

css-content