显示第一个元素

Question

如果我有：

但只有第一个.first 的结果。第一个 .second 仍然显示 none.

.first {
  display: none;
}

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

.second {
  display: none;
}

.second:first-child {
  display: block;
}

<div class="first">first</div> //I want to display only this
<div class="ro">ro</div>
<div class="first">first</div> //I want to hide this
<div class="ro">ro</div>
<div class="first">first</div> //I want to hide this
<div class="ro">ro</div>
<div class="first">first</div> //I want to hide this
<div class="ro">ro</div>
<div class="second">second</div> //I want to display only this
<div class="eo">eo</div>
<div class="second">second</div> //I want to hide this
<div class="eo">eo</div>

Answer 1

你应该使用 subsequent-sibling combinator ~:

.first {
    display: block;
}
.first ~ .first {
    display: none;
}
.second {
    display: block;
}
.second ~ .second {
    display: none;
}

使用公式 .first ~ .first，您指示将 display: none 应用于所有带有 class .first 且前面带有另一个带有 class [= 的元素的元素13=].

显示第一个元素

Display first element

html

css

display