css - 瞄准未隐藏的第一个 child

Question

我有一个类为 .box-container 的 div，它可以包含类 .legend-panel 的几个 div，我只想对第一个应用一些样式未隐藏在盒子容器中的 child 。

我是 scss 的新手，所以我到达的目标是第一个 child ，但不是更多。

.legend-panel:first-child{
    bottom: 2.5em;
}

感谢您的帮助。

Answer 1

您可以混合使用非选择器和兄弟选择器来实现您想要的效果。以下假设您使用隐藏类来隐藏您的元素

.hidden {
  display:none;
}

.legend-panel:not(.hidden):first-child,             /* this styles the first visible if it is the first child */
.legend-panel.hidden + .legend-panel:not(.hidden) { /* this will style thie first show following a hidden panel */
  color:red;
}
.legend-panel:not(.hidden):first-child ~ .legend-panel,  
.legend-panel.hidden + .legend-panel:not(.hidden) ~ .legend-panel {  /* these will reset all following visible back to original */
  color: initial;
}

<div class="box-container">
  <div class="legend-panel hidden">
   hide
  </div>
  <div class="legend-panel hidden">
   hide
  </div>
  <div class="legend-panel">
   show - first
  </div>
  <div class="legend-panel hidden">
   hide
  </div>
  <div class="legend-panel hidden">
   hide
  </div>
  <div class="legend-panel">
   show - not styled
  </div>
</div>

<div class="box-container">
  <div class="legend-panel">
   show - first
  </div>
  <div class="legend-panel hidden">
   hide
  </div>
  <div class="legend-panel hidden">
   hide
  </div>
  <div class="legend-panel hidden">
   hide
  </div>
  <div class="legend-panel">
   show - not styled
  </div>
  <div class="legend-panel hidden">
   hide
  </div>
</div>