时间戳

首页 > 解决方案 > 定位第一个未隐藏的孩子

css - 定位第一个未隐藏的孩子

问题描述

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

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

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

谢谢你的帮助。

标签： csssass

解决方案

您可以混合使用 not 和同级选择器来实现您想要的。以下假设您正在使用隐藏类来隐藏您的元素

.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>

推荐阅读