仅使用 CSS：在整个文档中选择第一次出现的类答案

【问题标题】：With CSS only: Select first occurrence of class throughout whole document仅使用 CSS：在整个文档中选择第一次出现的类
【发布时间】：2022-04-05 17:46:43
【问题描述】：

我们有一个这样的 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>

必须隐藏所有具有“版权”类的元素，但第一个元素除外。

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

感谢您的帮助！

【问题讨论】：

标签： css css-selectors

【解决方案1】：

在这种情况下，每个.copyright 都是.inner 中的第一个也是唯一一个，因此您需要改为通过.inner 进行选择。如果您不需要对第一个孩子应用任何特殊规则，则不需要使用我在另一个问题中描述的方法；只需使用它来隐藏其他元素：

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

【讨论】：

太好了，谢谢！顺便提一句。我需要在打印网站（在 Firefox 中）时使用第一个出现作为页脚：@media print { .copyright { position: fixed;底部：0； } .inner ~ .inner .copyright { 显示：无； } }
很抱歉再次打扰，但我们忘记了一个重要细节：如果第一个“内部”节点不包含“版权”类怎么办？
这意味着您必须检查包含.copyright 的.inner，而使用纯CSS 无法做到这一点。你需要 JavaScript。

【解决方案2】：

试试这个JSfiddle

div.inner > .copyright { display:none; }
div.inner:first-child .copyright { display:block; background:#000; }

【讨论】：

我们忘记了一个重要细节：如果第一个“内部”节点不包含“版权”类怎么办？

【解决方案3】：

这仍然是 Google 上“css 选择第一次出现的类”的最佳答案，因此添加了我发现可行的简单技术。

此解决方案并未专门解决 OP，但允许您在兄弟姐妹中选择具有类的第一个元素。

您可以像JSFiddle 中所示使用兄弟选择器而不是选择器的组合

例如：

.my-class:not(.my-class ~ .my-class) {
  background: red;
}

这是如何工作的？

兄弟选择器 (~) 选择位于其他元素之后的元素。

所以这会选择每个元素除了第一个：

.my-class ~ .my-class {
  background: red;
}

然后我们只使用:not 选择器来反转这个，即只选择第一个元素。

我只在 Chrome 上对此进行了测试，但认为它应该可以在大多数现代浏览器上运行。

【讨论】：