css - 如何仅隐藏父类的第一个元素

Question

我有以下标记：

.shwonlyclick {
  display: none;
}

.asd>.delfirstdiv:first-child>.shwonlyclick:first-child {
  display: block;
}

<div class="asd">
  <div>title</div>
  <div>sub title</div>
  <div class="delfirstdiv">
    <p class="shwonlyclick">Show this</p>
  </div>
  <div class="delfirstdiv">
    <p class="shwonlyclick">Hide</p>
  </div>
  <div class="delfirstdiv">
    <p class="shwonlyclick">Hide</p>
  </div>
</div>

所有标签都被隐藏了，我只想要第一个显示。如何？

标签： css

Answer 1

将您的标题和子标题移到父 div 之外并在选择器中修复您的错字，它将起作用：

first-child是其父元素中的第一个元素（不是具有类名的第一个元素）

.shwonlyclick {
  display: none;
}

.asd>.delfirstdiv:first-child>.shwonlyclick:first-child {
  display:block;
}

<div>title</div>
<div>sub title</div>
<div class="asd">
  <div class="delfirstdiv">
    <p class="shwonlyclick">Show this</p>
  </div>
  <div class="delfirstdiv">
    <p class="shwonlyclick">Hide</p>
  </div>
  <div class="delfirstdiv">
    <p class="shwonlyclick">Hide</p>
  </div>
</div>

如果您无法更改 html 布局，那么您可以使用相邻的兄弟组合器来隐藏任何跟随另一个的 div（这意味着显示第一个）：

.delfirstdiv+.delfirstdiv .shwonlyclick {
  display: none;
}

<div class="asd">
  <div>title</div>
  <div>sub title</div>
  <div class="delfirstdiv">
    <p class="shwonlyclick">Show this</p>
  </div>
  <div class="delfirstdiv">
    <p class="shwonlyclick">Hide</p>
  </div>
  <div class="delfirstdiv">
    <p class="shwonlyclick">Hide</p>
  </div>
</div>