Question

所以我现在已经阅读了足够多的时髦nth-child和nth-of-type模式，让第七个儿子的第七个儿子向后飞向冥王星并返回。但我仍然没有想到简单地以简洁的方式提供特定孩子的清单。它的工作原理如下：

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

上述语法显然非常方便，例如在设置表格单元格时。这样的事情会存在，对我来说似乎不费吹灰之力。当然我总是可以使用：

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

但是我的CSS中存在多余的重复和混乱。特别是当我需要在td之前指定一个类名时。然后它变得像这样膨胀，例如：

.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看起来更优雅，简洁，可读。有没有办法一次性向选择器提供特定的n-s列表？（不寻找预处理器修复。）

Answer 1

不幸的是没有。 Selectors 4和CSS Syntax 3都没有扩展An + B表示法以允许列表这样的表达式，如1,3,7,10示例中所示，但我不知道它是否可能值得建议，因为它似乎很可行。事实上，我刚刚开始suggested this（我无法使用邮件列表搜索或谷歌找到任何早期提案。）

最接近Selectors 4提供的解决方案是通过:matches()伪，这使得你必须重复的唯一一点是:nth-child(...)：

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

但这仍远非理想，无论如何还没有实施。

如果你可以从你正在寻找的大多数数字索引中找出模式的至少部分，你可以根据需要使用:not()和/或其他修改此模式: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指定任意子项列表（无模式）

2 个答案: