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

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 */
}

Answer 1

里克希区柯克非常接近.

正确的选择器~如下:

.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>

也不

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

将是可见的.

Answer 2

您可以使用: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 元素。我一直觉得这是最具可读性的。