CSS 伪元素 - 在一对括号中定位多个元素答案

【问题标题】：CSS Pseudo Elements - Target Several Elements in a Single Parentheses PairCSS 伪元素 - 在一对括号中定位多个元素
【发布时间】：2021-12-30 22:06:52
【问题描述】：

我有一个无序列表，在 HTML 中有几个列表点。在我的 CSS 中，我想定位第 5 和第 7 个列表点。所以我去

.my-list li:nth-child(5, 7){
background:yellow;
}

什么都没有。它仅适用于单个数字。所以我认为我不能用逗号分隔它们。我应该用什么字符/符号将它们分开？这甚至可能吗？替代解决方案？我怀疑我是否需要为列表中的每个 n^th 元素重写一个目标......我们快到 2022 年了。这只是我的推理。

【问题讨论】：

我怀疑我是否需要为列表中的每个第 n 个元素重写一个目标。 --> 你必须这样做，除非我们可以使用 A 来表达一个模式*n + B

标签： html css pseudo-element

【解决方案1】：

鉴于您的具体示例，选择第 5 个和第 7 个元素比“[重写]每个单个 n 个元素的 [选择器]，”要容易一些使用:is():

.my-list li:is(:nth-child(5),:nth-child(7)) {
  background:yellow;
}

但它仍然是一个有点冗长的替代方案，与您想要的方法相比，目前还不可能。

如果 JavaScript 是一个选项，那么一个简单的实用程序函数可以检索所需的元素，但目前还不能仅在 CSS 中。

【讨论】：

【解决方案2】：

没有任何符号。您可以像这样将它们分开：

.my-list li:nth-child(5),
.my-list li:nth-child(7) {
    background: yellow;
}

如果你使用 css 预处理器，你可以把它写得更简洁一些，特别是如果你要为列表项提供类：

.item {
    &:nth-child(5),
    &:nth-child(7) {
        background-color: #fff;
    }
}

【讨论】：