在第一个元素显示后隐藏具有相同类名的元素

Question

如果我有以下HTML代码:

<div class="myClass">1</div>
<div class="myClass">2</div>
<div class="myClass">3</div>

我可以在我的CSS中编写一个规则来实现以下内容吗:

.myClass {
    /* only display the first instance of the class */
}

- Daniel Williams

Answer 1

里克·希奇科克（Rick Hitchcock）非常接近。

正确的选择器是~，如下所示：

.myClass ~ .myClass {
display: none;
}

---

说明：

CSS中：

• +选择器表示一个紧接着的兄弟元素。
• ~选择器表示任何后续兄弟元素。

因此，对于以下标记：

<div class="myContainer">
<div class="myClass">1</div>
<img class="myImage" alt="My Image" />
<div class="myClass">2</div>
<div class="myClass">3</div>
</div>

如果你声明：

.myClass + .myClass {
display: none;
}

那么

<div class="myClass">3</div>

这个内容不会被显示出来，但是

<div class="myClass">2</div>

将会可见。

而如果你声明：

.myClass ~ .myClass {
display: none;
}

那么也不是。

<div class="myClass">2</div>

nor

<div class="myClass">3</div>

将会可见。

- Rounin - Standing with Ukraine

Answer 2

这将隐藏所有跟在其他 .myClass 元素后面的 .myClass 元素:

.myClass + .myClass {
  display: none;
}

这基本上是“仅显示类的第一个实例”的反义词。在这种情况下，它是“隐藏除了类的第一个实例之外的所有内容。”

代码片段：

.myClass + .myClass {
  display: none;
}

<div class="myClass">1</div>
<div class="myClass">2</div>
<div class="myClass">3</div>

- Rick Hitchcock

---

这是一个不错的技巧，我以前从未见过。但它的可读性并不太好。如果我没有解释就看到它，我会完全不知道它在做什么。 - TheValyreanGroup

@TheValyreanGroup，非常好的观点。可读性会导致更易维护的代码。然而，经常使用相邻兄弟选择器使其更容易阅读，这比为此功能编写两种样式更少代码需要维护。 - Rick Hitchcock

Answer 3

您可以使用:first-of-type。

.myClass {
    display: none;
}

.myClass:first-of-type {
    display: block;
}

<div class="myClass">1</div>
<div class="myClass">2</div>
<div class="myClass">3</div>

这将隐藏DOM中除第一个以外的所有myClass元素。我始终觉得这样做最易读懂。

- TheValyreanGroup

---

这不正确。:nth-of-type 伪选择器查找的是元素类型，而不是类。(是的，我知道，我也希望有一个 :nth-of-class 伪选择器...) - Rounin

举个例子，看一下下面的代码：<div class =“myClass”> 1 </ div> <span class =“myClass”> 2 </ span> <div class =“myClass”> 3 </ div> <div class =“myClass”> 4 </ div> - 你会发现不仅第一个<div>可见，第一个<span>也是可见的。为什么？因为它们都是:first-of-type。 - Rounin

@Rounin然而，对于他的所有相同类型的情况，这确实有效，并且是最有意义的。 - TheValyreanGroup

同意 - 在所有元素类型相同时，它确实在这种情况下起作用。 - Rounin