Question

假设我们有一个包含5个项目的列表，我们希望将一些特定样式应用于第一个或最后一个孩子。但是这个列表的功能需要通过jQuery应用一个类来隐藏它的一些项目（让我们称之为.hide），这将在目标项目上设置display: none;。

我在开头谈论的特定样式应该只应用于FIRST和可见的LAST项目，所以我想要实现的是以某种方式跳过那些其中已应用.hide类，并且同时是第一个或最后一个项目。

我已经尝试通过组合一些:not(.hide)和:first-child / :last-child伪来完成此操作，但它不起作用。此外，尝试使用simbling选择器最多只能用于第一个孩子，但是现在没有办法在css中选择以前的兄弟姐妹，所以这个解决方案不会涵盖最后一个孩子的问题。

这是一个jsfidle，你可以更好地理解我想要做的事情：

或

HTML

<div class="hide">Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
<div class="hide">Item 5</div>

CSS

.hide {display: none;}
div:not(.hide):first-child,
div:not(.hide):last-child {color: red;}

Answer 1

如前所述，CSS选择器无法做到这一点。原因有两个：

:first-child和:last-child代表他们父母的第一个也是最后一个孩子。它们不代表与选择器其余部分匹配的第一个和最后一个子元素。链接:not(.hide)只是告诉选择器忽略该元素是否具有.hide类;它不会改变选择器其余部分的含义。
There is currently no other pseudo-class available for the first or last (or nth) element matching an arbitrary selector.

由于您已经在使用jQuery来应用.hide类，因此可以使用它将另一个类应用于匹配:not(.hide)的第一个和最后一个元素，然后将这些类定位到您的CSS。

Answer 2

你的意思是这样吗？

var notHidden = $('div').not('.hide');
notHidden.first().css('color', 'red');
notHidden.last().css('color', 'red');

Answer 3

您可以为第一个可见的孩子添加特定样式，如下所示：

.hide {display: none;}
div:not(.hide){
  color: red;
}
div:not(.hide) ~ div:not(.hide){
    color: black; /*reset everything to normal*/
}

但是没有办法用css选择最后一个可见的孩子。为此，您需要使用javascript