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的父继承。

在您的示例中，.foo::before只能从其附加的.foo继承，同样也可以继承.baz::before和.baz。 .baz::before无法继承.foo::before，因此您无法尝试做的事情。似乎没有一种可靠的方法来确保一个伪元素总是通过CSS继承自另一个伪元素，而不在标记本身内强制执行此操作。

儿童：在内容继承之前

1 个答案: