javascript - 如何在没有ID的情况下隐藏子div

Question

我有一个问题，我需要隐藏父 div 中除第一个之外的所有 div。 问题是，div 没有 ID 或任何东西。

有什么可行的方法吗？最好通过 CSS 还是纯 JS？

<div role="list" class="slds-form">
    <div class="slds-grid">Visible</div>
    <div class="slds-grid">Hide</div>
    <div class="slds-grid">Hide</div>
</div>

感谢您的任何建议:)

Answer 1

使用第n个 child :

.slds-form > div:nth-child(n + 2) {
  display: none;
}

<div role="list" class="slds-form">
  <div class="slds-grid">Visible</div>
  <div class="slds-grid">Hide</div>
  <div class="slds-grid">Hide</div>
</div>