css - 仅使用 CSS : Select first occurrence of class throughout whole document

Question

我们有一个像这样的 DOM:

<div class="outer">
    <div class="inner"> <!--// No "copyright" in this node //-->
        <div class="content">...</div>
    </div>
    <div class="inner">
        <div class="content">...</div>
        <div class="copyright">...</div> <!--// DISPLAY THIS ONE //-->
    </div>
    <div class="inner">
        <div class="content">...</div>
        <div class="content">...</div>
        <div class="content">...</div>
        <div class="copyright">...</div> <!--// Hide this one //-->
    </div>
    <div class="inner">
        <div class="content">...</div>
        <div class="content">...</div>
        <div class="copyright">...</div> <!--// Hide this one too, etc. //-->
    </div>
    <!--// etc. //-->
</div>

除第一个元素外，所有类为“copyright”的元素都必须隐藏。

我们尝试应用此 approach ，但不幸的是没有成功。它必须是纯 CSS 解决方案。有什么想法吗？

感谢您的帮助!

Answer 1

在这种情况下，每个 .copyright是 .inner 中第一个也是唯一一个同类产品, 所以你需要选择 .inner反而。如果您不需要对第一个 child 应用任何特殊规则，则无需使用我在另一个问题中描述的方法；只需使用它来隐藏其他元素:

.inner ~ .inner .copyright {
    display: none;
}