为 nth-child 和 nth-of-type 指定任意 children（无模式）列表

Question

所以我现在已经阅读了足够多的各种时髦 nth-child 和 nth-of-type 模式，让第七个儿子的第七个儿子飞 space-ship 向后飞到冥王星并返回。但是我仍然没有找到一种方法来以简洁的方式简单地提供特定 children 的列表。它会像这样工作：

td:nth-child(1,3,7,10) { text-align: center; ... }

上述语法显然非常方便，例如在设置 table 单元格时。像这样的东西会存在，对我来说似乎是 no-brainer。当然我总是可以使用：

td:nth-child(1), td:nth-child(3), td:nth-child(7), td:nth-child(10) { ... }

但在我的 CSS 中，这就是太多多余的重复和混乱。特别是当我还需要在 td 之前指定一个 class 名称时。然后就这么臃肿了，比如：

.study_references td:nth-child(1), .study_references td:nth-child(3), .study_references td:nth-child(7), .study_references td:nth-child(10) { ... }

我真的很想让我的 CSS 看起来更优雅、简洁和可读。真的没有办法一次性向选择器提供 nth-s 的特定列表吗？（不是在寻找预处理器修复程序。）

Answer 1

遗憾的是没有。 Selectors 4 nor CSS Syntax 3 have extended the An+B notation to allow a list of such expressions as in your 1,3,7,10 example either, though I wonder if it may be worth suggesting as it seems pretty doable. In fact, I just went ahead and suggested this（我无法使用邮件列表搜索或 Google 找到任何早期提案）。

最接近 Selectors 4 提供的解决方案是通过 :matches() 伪，这使得您唯一需要重复的位是 :nth-child(...):

.study_references td:matches(
  :nth-child(1), :nth-child(3), :nth-child(7), :nth-child(10)
) { ... }

但这离理想还很远，而且还没有实施。

如果您可以从您要查找的大多数数字索引中至少推测出模式的部分，则可以根据需要使用 [=14= 修改此模式] and/or 附加 :nth-child()/:nth-last-child() 并且仍然选择正确的元素。请参阅 this answer of mine，其中我将 [9, 11, n+12] 重构为 [n+9 除了 10]。然而，这可能比它的价值更麻烦，并且生成的选择器几乎总是远非优雅，除非你真的像我上面那样幸运。

Answer 2

当CSS缺少一个功能时，Sass可以提供帮助。您可以在 Sass 中尝试这样的公式。这不是最优雅的解决方案，但也许您可以改进它。

$children: 1,3,7,10;

@each $child in $children {
  td:nth-child(#{$child}) {
    ...
  }
}

为 nth-child 和 nth-of-type 指定任意 children（无模式）列表

Specifying a list of arbitrary children (no pattern) for nth-child and nth-of-type

css

css-selectors