使用纯 CSS 定位第一个可见元素

Question

我想知道是否可以将以下内容转换为纯 CSS。

 $('.child:visible:first').css({'border-top':'1px solid #cccccc','border-bottom':'1px solid #cccccc'});

我似乎找不到解决方案。

原文由 Paul 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在纯 CSS 中，不，这是不可能的。 Chris Coyier :first 被列为纯粹的 jQuery 构造： http ://css-tricks.com/pseudo-class-selectors/。

原文由 cage rattler 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

如果您知道它是如何实现隐藏的，这是可能的。例如，这将选择隐藏元素块（+1）之后的第一个可见元素：

 li[style*="display:none"] + li:not([style*="display:none"]) {
  /* ... */
  background-color: blue;
  color: white;
}

 <ul>
  <li style="display:none">hidden</li>
  <li style="display:none">hidden</li>
  <li>visible, selected</li>
  <li>visible, not-selected</li>
  <li style="display:none">hidden</li>
  <li>visible, selected</li>
  <li>visible, not-selected</li>
</ul>

原文由 Daniel 发布，翻译遵循 CC BY-SA 4.0 许可协议