选择：不包含某些特定类别的第一个孩子或最后一个孩子

Question

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

的特定风格我在一开始谈话应该只适用于第一和可见的最后一个项目，所以我想要做到的，是莫名其妙地跳过它应用了.hide类的那些在他们身上，并在同一时间的第一个或最后一个项目。

我已经试过通过组合一些:not(.hide)和:first-child/:last-child伪代码来做到这一点，但它不起作用。另外，尝试使用simbling选择器对于第一个孩子来说最多可以工作，但是现在没有办法在css中选择以前的兄弟，所以这个解决方案不会覆盖最后一个孩子的问题。

这里有一个jsfidle在这里你可以更好的理解我想要做的事：

http://jsfiddle.net/3wgxt1oL/

或

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