中子伪类

【问题标题】：Middle Child Pseudo-Class中子伪类
【发布时间】：2022-04-06 23:11:30
【问题描述】：

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

我知道没有文字 :middle-child 选择器，但有没有其他方法不求助于 Javascript？

【问题讨论】：

孩子的数量有变化吗？
元素的数量是在页面加载时设置的，并且可能因用户而异。
如果您使用 PHP 或 Ruby 或其他什么，您当然可以编写一个函数来向中间元素添加一个类。
您说的完全正确，这就是我已经在做的事情。我主要是在寻找某种我不知道的 CSS 技巧。
这样的伪类没有意义，因为偶数个元素中的中间孩子是什么？您的代码可能能够保证奇数个元素，但并非每个页面都能保证这种情况。

【解决方案1】：

这对我来说效果很好：

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

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

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

【讨论】：

这不是只有三个项目才有效吗？当时我正在寻找比它更多元素的东西。
不，这将选择所有不是第一个子元素和最后一个子元素的元素。你可以在这里看到它的实际效果：codepen.io/bentomas/pen/Gwqoe
哦，除非您想要 exact 中间孩子（即，应该只匹配一个元素）。我在想你想选择中间的所有孩子。至少这是我在寻找 :middle-child 伪类并找到此线程时所期望的。
@bentomas - 好吧，你刚刚以一种非常强大的方式解决了我的小问题。所以谢谢。 =)
不幸的是它不仅选择了一个中间元素

【解决方案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 */
    }
}

【讨论】：

如果元素个数为偶数，则可能包含div:nth-child(-1+#{$i}):nth-last-child(#{$i}) 和/或div:nth-child(#{$i}):nth-last-child(-1+#{$i}) 以分别选择位于中心左侧或右侧的元素。

【解决方案3】：

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

CSS

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

HTML

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

查看JsFiddle

【讨论】：

如果有 5 个项目呢？
@Mo.这将适用于所有中间儿童。转到提供的 JsFiddle 链接，在中间添加几个
并重新运行它。你会看到它们都变红了！

【解决方案4】：

如果您想将样式应用于既不是第一个子元素也不是最后一个子元素的所有元素，您可以使用:not(:first-child)，应用该样式，然后使用:last-child 将样式从最后一个元素中“带走” .但是您必须考虑当元素少于 3 个时会发生什么。

【讨论】：

如果你想避免重复（“带走风格”部分），请查看我的答案，它结合了两个“非”选择器，以捕捉所有中间元素。 . :-)

【解决方案5】：

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

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

【讨论】：

只有在元素数量已知的情况下才有效。我正在寻找适用于未知长度列表的东西。
好吧，我想如果你不知道总数，这也无济于事，但如果你知道 - 看看这个CSS3-nth-child on SO，这是一个与你类似的问题。

【解决方案6】：

我曾多次遇到需要针对中间孩子的需求，并且在参考了许多类似的问题及其各自的答案后，我开始使用我编写的这个 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;
    }
  }
}

【讨论】：

【解决方案7】：

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

【讨论】：

应该有sass解决方案