40

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

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

我似乎找不到解决方案。

4

6 回答 6

43

作为一个抽象，这是不可能的：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()伪类相当明显：它只选择与包含的选择器不匹配的元素。~运算符表示，如果右边的选择器是源代码中后面出现的左边选择器的兄弟，则右边的选择器将成为目标。

于 2013-09-12T14:06:25.997 回答
14

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

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>

于 2014-12-16T23:52:29.357 回答
10

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

于 2013-09-12T13:49:23.463 回答
10

试试这个 例子

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;
}
于 2014-11-24T09:10:17.017 回答
1

就我而言，我只需要在第一个li之前提供填充， 我就可以使用以下代码实现这一点。

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

但是如果你想给 li 特定的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;
}

如果您的border-top 为3px，那么margin-bottom 将为-3px，并将其添加到高度以平衡（18px）。

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

于 2019-04-08T21:02:00.507 回答
0

我有一个案例，当按钮列表的两个顶部按钮中的任何一个可见时，将样式应用于两者都解决了它：

.bt:nth-child(1), .bt:nth-child(2) {
   ...
}
于 2019-06-01T04:47:53.277 回答