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

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

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

我似乎无法找到解决方案。

Answer 1

在纯CSS中，不可能。 Chris Coyier 首先将其列为纯粹的jQuery构造： http ： //css-tricks.com/pseudo-class-selectors/ 。

Answer 2

作为一个摘要，它是不可能的：jQuery依赖于遍历DOM以编程方式确定适合各种条件的元素，然后停止。 你不能这样做。 但我认为在实践中你会知道各种各样的事情。 此解决方案假定：

1. 你知道这些.child元素将如何被隐藏。 他们是否会display: none作为内联样式（如果你在它们上使用了jQuery .hide() ，它们会）？ 他们有一类.hidden吗？ 只要您知道该方法，就会有一个可用于表示此方法的选择器。 您可以将它与CSS3 :not()选择器结合使用。
2. 由于这些被称为.child ，我假设他们都是兄弟姐妹 – 没有一个嵌套在其他.child元素中，并且它们都共享同一个父元素。

如果上述任何一种情况都不正确，那就不可能了。 但如果它们都是真的：

 .child:not( [style*='display: none'] ) { border-top: 1px solid #cccccc; border-bottom: 1px solid #cccccc; } .child:not( [style*='display: none'] ) ~ .child:not( [style*='display: none'] ) { /* ...or whatever the default styles are */ border-top: none; border-bottom: none; } 

:not()伪类非常明显：它只选择与包含的选择器不匹配的元素。 ~运算符意味着如果右侧的选择器是源代码中随后出现的左侧选择器的兄弟， 则它将成为目标。

Answer 3

如果你知道如何实现隐藏，它是可行的。 例如，这将工作：

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

 
 
hello
 
World!
  

Answer 4

试试这个例子

 ul li{ background: lightslategrey } li:first-child{ background: blue; } ul li[style*="display:none"] + li:not([style*="display:none"]){ background: blue; } ul li:not([style*="display:none"]) + li{ background: blue; } ul > li:not([style*="display:none"]) ~ *{ background: lightslategrey!important; }