Question

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

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

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

Answer 1

作为一个摘要，它是不可能的：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()伪类非常明显：它只选择不匹配包含的选择器的元素。 ~运算符意味着右侧的选择器将是目标，如果它是左侧选择器的兄弟，后面是源代码。

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

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

Answer 4

试试这个Example

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

Answer 5

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

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

但是，如果您想给li特定的CSS，则必须遵循其他答案中提到的技巧。

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

因此，如果我的第一个li隐藏了，则第二个元素仍显示在边框顶部。我更新了上面的代码，以确保所有 li 元素都具有border-top，并且我只是使用了边距技巧隐藏了第一个border-top

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

如果您的边框顶部为3像素，那么下边距将为-3像素，并将其添加到平衡高度（18像素）。

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

Answer 6

我遇到一种情况，当按钮列表中的两个顶部按钮之一可见时，将样式应用于两个按钮即可解决：

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

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

6 个答案: