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

Rick Hitchcock非常接近。

正确的选择器为kCGColorSpaceExtendedLinearSRGB，如：

kCGColorSpaceDisplayP3

<强>解释

在CSS中：

~选择器表示一个元素，它是紧接着的后续兄弟。
.myClass ~ .myClass { display: none; }选择器表示任何后续兄弟的元素。

因此，使用以下标记：

如果您声明：

然后

<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;
}

将会显示。

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>

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元素。我一直认为这是最具可读性的感觉。

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

3 个答案: