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

我想知道是否有可能将以下内容转换成纯CSS

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

---

我似乎找不到解决方案。

在纯CSS中，不，这是不可能的。Chris Coyier：首先作为一个纯粹的jQuery构造列出：。

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

您知道如何隐藏这些

.child

元素。它们是否将

display:none

作为内联样式（如果您在它们上使用了jQuery

.hide（）

，它们将）？他们是否有一个

.hidden

类？只要您知道该方法，就可以使用选择器来表示该方法。您可以将其与CSS3

：not（）

选择器结合使用

因为它们被称为

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

伪类非常明显：它只选择与包含的选择器不匹配的元素。

~

运算符意味着，如果右侧的选择器是源代码后面出现的左侧选择器的同级，则它将成为目标。

试试这个

---

如果您知道它是如何实现隐藏的，这是可能的。例如，这将起作用：

li:first-child[style*=“display:none”]+li:not（[style*=“display:none”]）{
/* ... */
背景颜色：蓝色；
}

您好
世界

在我的情况下，我只需要在第一个li之前填充 我能够通过以下代码实现这一点

ul:before {
  content: ' ';
  height: 15px;
  display: block;
}

但是如果你想给李彦宏特定的css，那么你必须遵循其他答案中提到的技巧

我所有的li元素都希望第一个元素有一个边框顶部

因此，如果我的第一个li被隐藏，那么第二个元素仍然显示边界顶部。 我更新了上面的代码，以确保所有li元素都有边框顶部，我只是使用边距技巧隐藏了第一个边框顶部

ul {
  content: ' ';
  height: 15px;
  display: block;
  margin-bottom: -1px; // (update as per the width of your border-top)*
  z-index: 2;
  position: relative;
}

如果边框顶部为3px，那么边距底部将为-3px，并将其添加到平衡高度（18px）中

---

这些只是技巧，因为CSS没有：visible选择器

我遇到过这样的情况：按钮列表的两个顶部按钮中有一个是可见的，将样式应用于这两个按钮：

.bt:nth-child(1), .bt:nth-child(2) {
   ...
}

---

不，你不能用纯CSI来做。我相信如果你能把类添加到可见元素（.visible/.hidden）中是不可能的。这是可能的，但这并不能回答你的问题。谢谢！我认为这是不可能的，但我想我还是会问。感谢您的反馈#1是关键。不能使用选择器来确定元素是隐藏的还是可见的；你必须依赖一些其他信息，这些信息可以与选择器匹配，从而保证你的选择。是的，这是不可避免的（我想我已经非常明确地说明了这一点）。然而，这一假设并非不合理。如果作者在受控代码库中工作，那么将有一种标准化的方法来隐藏这些元素：用例暗示了这一点。如果代码是为一个插件编写的，而这个插件不能对代码库做出任何假设（而给定的场景只是一个抽象），那么我们就不走运了。我想你是不是在第6行错误地添加了

.child，

？它匹配每个孩子，所以样式适用于所有孩子。这对我在Chrome中很有效，但有一个变化：在display:none之间添加了一个空格。。。[style*=“display:none”]仅当第一个li元素被隐藏时，此选项才有效。如果有两个或多个显示为“无”的li，则此操作无效。你需要做一些像这样糟糕的事情：并确保覆盖字段的所有可能长度。谢谢@Amit，后续示例是纯金的，但是如果在第一个可见项之前有两个隐藏项，或者三个，或者一个不确定的数字呢？在本例中，“+”同级combinator将直接针对DOM中最后一个隐藏元素旁边的任何元素，因此在可见元素之前有多少隐藏元素并不重要。

.bt:nth-child(1), .bt:nth-child(2) {
   ...
}