Question

有没有办法使用CSS选择器来获取元素列表中的中间孩子？

我知道没有文字:middle-child选择器，但有没有其他方法可以使用Javascript？

Answer 1

这对我来说效果很好：

*:not(:first-child):not(:last-child) {
    ...
}

您可以在此处查看此示例：http://codepen.io/bentomas/pen/Gwqoe

对此的一个警告是，它仅适用于IE 9+：http://caniuse.com/#feat=css-sel3

Answer 2

虽然不优雅，但如果你知道元素总数的上限和下限，你可以采用强力方法来选择中间元素。

例如，以下规则将选择一组5,7或9个元素中的中间元素。

div:nth-child(3):nth-last-child(3) {
  /* The middle element in a set of 5 is the 3rd element */
}

div:nth-child(4):nth-last-child(4) {
  /* The middle element in a set of 7 is the 4th element */
}

div:nth-child(5):nth-last-child(5) {
  /* The middle element in a set of 9 is the 5th element */
}

或者使用Sass：

@for $i from 3 through 5 {
    div:nth-child(#{$i}):nth-last-child(#{$i}) {
        /* The middle element */
    }
}

Answer 3

如果要将样式应用于既不是第一个孩子也不是最后一个孩子的所有元素，您可以使用:not(:first-child)，应用样式，然后使用:last-child来“取消风格”从最后一个元素。但是你必须考虑当少于3个元素时会发生什么。

Answer 4

你可以使用“不是先行而不是最后”的方法，如下所示：

<强> CSS

li:not(:first-child):not(:last-child) {
  color:red;
}

<强> HTML

<ul>
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
</ul>

检查Jsfiddle

Answer 5

您是否尝试过:nth-child(#)？

根据您要选择的那个，您只需将＃替换为数字。

Answer 6

Javascript是执行此客户端的唯一方法。

中学儿童伪班

6 个答案: