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

Question

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

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

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

Answer 1

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

1. 你知道如何,这些.child元素会被隐藏.它们是否display: none具有内联样式(如果你.hide()在它们上使用jQuery ,它们会)？他们有一类.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 2

如果你知道如何实现隐藏,它是可行的.例如,这可以工作:

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

<ul>
  <li style="display:none">hello</li>
  <li>World!</li>
</ul>

Answer 3

在纯CSS中,不可能.克里斯Coyier有:第一列为纯属jQuery的构造: http://css-tricks.com/pseudo-class-selectors/.

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;
}