：nth-​​child（2n）of [attribute = value] [英] :nth-child(2n) of [attribute=value]

问题描述

我有一个包含行的列表，每个 li 都有一个属性 data-status -5：

I have a list with rows, each li has an attribute data-status which the value can be 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>

我想让每个奇数 li code> data-status 是1具有不同的背景，
可以在CSS中执行吗？

I want each odd li that the data-status is 1 to be have a different background, is it possible to do in CSS?

推荐答案

如果问题是 如何选择具有特定属性的所有奇数元素 其他答案，与

If the question is how to select all the odd elements with a particular attribute ?, then it is possible how explained in the other answers, with

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

或更简单的方式：

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

查看 nth-child 的工作原理。

如果问题是 如何选择具有特定属性的所有元素，然后只选择该子列表的奇数？ ，这是CSS尚不可能，但它会与 CSS选择器4级，作为这里解释，用 nth-match（）伪类：

If, instead, the question is how to select all the elements with a particular attribute, and then pick only the odd of that sub-list ? , well, that is not yet possible with CSS, but it will with CSS Selectors Level 4, as explained here, with the nth-match() pseudo-class:

: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

Let's wait... CSS4 is coming !! :P

EDIT ：由Michael_B，此功能已被CSS4规范剥离，因此请停止等待并开始创建另一种方式：/

EDIT: as reported by Michael_B, this feature has been stripped by CSS4 specifications, so stop waiting and start figuring another way to do it :/

这篇关于：nth-​​child（2n）of [attribute = value]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！