中童伪班

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

如果要将样式应用于既不是第一个子元素也不是最后一个子元素的所有元素，可以使用

:not(:first-child)

，应用样式，然后使用

:last-child

从最后一个元素“取消样式”。但你必须考虑当元素少于 3 个时会发生什么。

Answer 5

我曾多次遇到针对中间孩子的需要，并且在参考了许多类似问题及其各自的答案后，我开始使用我编写的这个 sass mixin。

// Generate a reasonable number rules limited by $n.
@mixin middle-child($n) {
  // There is no middle for nChildren less than 3,
  // so lets just start at 3.
  @for $i from 3 to $n {
    // Find the middle, bias right for odd numbers.
    $mid: math.ceil(math.div($i, 2));
    // Select only those sets of children that number $i.
    &:first-child:nth-last-child(#{$i}) {
      // Select the middle child of that set.
      ~ :nth-child(#{$mid}) {
        @content; // Apply your styles.
      }
    }
  }
}

用途：

.navigation {
  background-color: #ba0020;

  .nav-item {
    color: white;
    
    @include middle-child( 8 ) {
      font-weight: 900;
    }
  }
}

Answer 6

你尝试过吗

:nth-child(#)

？

根据您要选择的选项，只需将 # 替换为数字即可。

Answer 7

    /* Selects the single middle element */
.parent :nth-child(odd) {
    /* styles */
}

/* Selects the middle elements if there are multiple */
.parent :nth-child(n) {
    /* styles */
}

当元素个数为奇数时为中间元素

.parent :nth-child((n+1)/2) {
    /* styles */
}

当元素个数为偶数时为中间元素

.parent :nth-child(n/2),
.parent :nth-child((n/2)+1) {
    /* styles */
}

Answer 8

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