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

使用nth-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>

Answer 2

这将为您工作：

您可以将子选择（:first-child）与:not结合使用以实现您想要的结果。

.slds-form > div:not(:first-child) {
  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>

希望这对您有所帮助。

Answer 3

您可以使用function(selectedHour, selectedMinute)：

:not(:first-child)

.slds-form>div:not(:first-child) {
  display: none;
}

Answer 4

可以添加一个额外的类来切换显示隐藏。

.slds-hide {
  display: none;
}
.slds-show {
  display: block;
}

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

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

4 个答案: