选择不包含某些特定类的 :first-child 或 :last-child答案

【问题标题】：Select :first-child or :last-child that doesn't contain some specific class选择不包含某些特定类的 :first-child 或 :last-child
【发布时间】：2014-11-21 09:02:04
【问题描述】：

假设我们有一个包含 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;}

【问题讨论】：

请始终在问题上插入代码。如果 jsfiddle 失败，问题就会失去意义
你在使用javascript吗？你没有标记任何 JS
你可以用.detach代替.hide
无法使用 CSS 选择器。这些伪类扇区使用元素而不是类和属性。需要一个 JS 解决方案。
CSS 在取消选择特定类后无法选择子项。在 CSS 中无法进行链接！

标签： html css css-selectors

【解决方案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 中定位这些额外的类。

【讨论】：

【解决方案2】：

你的意思是这样的吗？

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

【讨论】：

是的，像这样。我忘了提到的是，我想知道这是否只能通过 CSS 来完成。我希望有机会以其他方式使用 :not 选择器来使其工作。
那么 CSS 怎么知道哪个元素是第一个或最后一个？
您能详细说明一下吗？那里的代码是什么？如果它包含更多关于 OP 的信息，这个答案可能会很有用。

【解决方案3】：

你可以为第一个可见的孩子添加特定的样式，像这样：

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

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

【讨论】：