css - 中子伪类

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

If you want to apply a style to all elements that are neither first children nor last children, you could use :not(:first-child), apply the style, and then use :last-child to 'take the style away' from the last element. But you'd have to think about what happens when there are less than 3 elements.

Answer 5

你试过:nth-child(#)吗？

根据您要选择哪一个，您只需将 # 替换为数字即可。

Answer 6

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