Question

我有以下问题：

我有一个这样的清单：

<div class="list">
  
  <h3 class="type1">Type 1</h3>
  <div class="item">ITEM ---- ITEM</div>
  <div class="item">ITEM ---- ITEM</div>
  <div class="item">ITEM ---- ITEM</div>
  <div class="item">ITEM ---- ITEM</div>
  <h3 class="type1">Type 1 to be hidden</h3>
  <div class="item">ITEM ---- ITEM</div>
  <div class="item">ITEM ---- ITEM</div>
  <div class="item">ITEM ---- ITEM</div>
  <div class="item">ITEM ---- ITEM</div>
  <h3 class="type2">Type 2 </h3>
  <div class="item">ITEM ---- ITEM</div>
  <div class="item">ITEM ---- ITEM</div>
  <div class="item">ITEM ---- ITEM</div>
  <div class="item">ITEM ---- ITEM</div>
  <h3 class="type2">Type 2 to be hidden</h3>
  <div class="item">ITEM ---- ITEM</div>
  <div class="item">ITEM ---- ITEM</div>
  <div class="item">ITEM ---- ITEM</div>
  <div class="item">ITEM ---- ITEM</div>
  <h3 class="type2">Type 3 </h3>
  <div class="item">ITEM ---- ITEM</div>
  <div class="item">ITEM ---- ITEM</div>
  <div class="item">ITEM ---- ITEM</div>
  <div class="item">ITEM ---- ITEM</div>
  <h3 class="type2">Type 3 to be hidden</h3>
  <div class="item">ITEM ---- ITEM</div>
  <div class="item">ITEM ---- ITEM</div>
  <div class="item">ITEM ---- ITEM</div>
  <div class="item">ITEM ---- ITEM</div>
  
</div>

我有多个标题（h3类class1，type2，type3）。

我想只显示每种类型中的第一种。

我怎样才能在css中这样做。

我无法添加其他类，我必须使用给定的html设置。

任何想法???

Answer 1

如果您的最新课程type2（您的文字说＆＃34;输入3＆＃34;）中没有拼写错误，那么您可以使用常规同级选择器~和{{ 1}}

＆＃13;

nth-of-type

＆＃13;

h3 {
  background: red /* demo */
}

h3:first-of-type~h3 {
  display: none
}

h3.type1~.type2:nth-of-type(2n+1) {
  display: block
}

＆＃13;

如果这些类中存在拼写错误，您可以使用普通兄弟滑块<div class="list"> <h3 class="type1">Type 1</h3> <div class="item">ITEM ---- ITEM</div> <div class="item">ITEM ---- ITEM</div> <div class="item">ITEM ---- ITEM</div> <div class="item">ITEM ---- ITEM</div> <h3 class="type1">Type 1 to be hidden</h3> <div class="item">ITEM ---- ITEM</div> <div class="item">ITEM ---- ITEM</div> <div class="item">ITEM ---- ITEM</div> <div class="item">ITEM ---- ITEM</div> <h3 class="type2">Type 2 </h3> <div class="item">ITEM ---- ITEM</div> <div class="item">ITEM ---- ITEM</div> <div class="item">ITEM ---- ITEM</div> <div class="item">ITEM ---- ITEM</div> <h3 class="type2">Type 2 to be hidden</h3> <div class="item">ITEM ---- ITEM</div> <div class="item">ITEM ---- ITEM</div> <div class="item">ITEM ---- ITEM</div> <div class="item">ITEM ---- ITEM</div> <h3 class="type2">Type 3 </h3> <div class="item">ITEM ---- ITEM</div> <div class="item">ITEM ---- ITEM</div> <div class="item">ITEM ---- ITEM</div> <div class="item">ITEM ---- ITEM</div> <h3 class="type2">Type 3 to be hidden</h3> <div class="item">ITEM ---- ITEM</div> <div class="item">ITEM ---- ITEM</div> <div class="item">ITEM ---- ITEM</div> <div class="item">ITEM ---- ITEM</div> </div>以相同的方式实现它，但以不同的方式使用选择器

＆＃13;

h3 {
  background: red/* demo */
}

.type1~.type1,
.type2~.type2,
.type3~.type3 {
  display: none;
}

＆＃13;

Answer 2

使用此风格

.type1 ~ .type1, 
.type2 ~ .type2, 
.type3 ~ .type3
{
    display: none;
}

这是一般的兄弟选择器

Answer 3

.list h3:nth-of-type(2n+1)它将选择第一个H3元素。使用nth-of-type将按元素类型选择子项。

仅显示具有类型的类的第一个标题

3 个答案: