html - :nth-child(2n) of [attribute=value]

Question

我有一个包含行的列表，每个 li 都有一个属性 data-status 其值可以是 1-5:

<ul>
    <li data-status="1"></li>
    <li data-status="2"></li>
    <li data-status="2"></li>
    <li data-status="1"></li>
    <li data-status="1"></li>
    <li data-status="2"></li>
    <li data-status="3"></li>
    <li data-status="4"></li>
    <li data-status="5"></li>
    <li data-status="5"></li>
    <li data-status="1"></li>
</ul>

我希望 data-status 为 1 的每个奇数 li 都具有不同的背景，可以用 CSS 实现吗？

Answer 1

如果问题是how to select all the odd elements with a particular attribute ?，那么其他答案中的解释是可能的，有

li[data-status="1"]:nth-child(2n+1) {
   background: #f00;
}

或者更简单的方式:

li[data-status="1"]:nth-child(odd) {
   background: #f00;
}

看看this good article nth-child 是如何工作的。

相反，如果问题是如何选择具有特定属性的所有元素，然后仅选择该子列表中的奇数元素？，那么，这在 CSS 中尚不可行，但在 CSS Selectors Level 4 中可以实现，如 explained here ，使用 nth-match() 伪类:

:nth-match(An+B of <selector>)

在你的情况下是

li:nth-match(2n+1 of [data-status="1"])

或

li:nth-match(odd of [data-status="1"])

让我们等等……CSS4 来了!! :P

---

编辑:据 Michael_B 报道，this feature has been stripped by CSS4 specifications ，所以停止等待并开始想出另一种方法来做到这一点:/