中学儿童伪班

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

您可以使用“不是第一位也不是最后一位”的方法，如下所示：

的CSS

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

的HTML

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

检查JsFiddle

Answer 4

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