CSS 伪元素 - 以单个括号对中的多个元素为目标

Question

我有一个无序列表，在 HTML 中有几个列表点。在我的 CSS 中，我想瞄准第 5 个和第 7 个列表点。那我去

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

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

Answer 1

鉴于您的具体示例，select 第 5 和第 7 个元素比“[重写] [selector] 每个 [=18] 更容易一些=]nth element,” using :is():

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

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

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

Answer 2

没有符号。你可以这样分开它们：

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

如果你使用 css-preprocessors 你可以把它写得更干净一点，特别是如果你给列表项 class:

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

CSS Pseudo Elements - Target Several Elements in a Single Parentheses Pair