: [attribute=value]的第n个子节点(2n)

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

如果问题是如何选择具有特定属性的所有奇数元素?，则可能在其他答案中如何解释，使用

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()伪类:

: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

---

EDIT:据Michael_B报道，CSS4规范已经剥离了该功能，所以停止等待，开始寻找另一种方法:/

Answer 2

我相信你能做到

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

有一个工作的例子在http://jsfiddle.net/adamh/ggtff/

Answer 3

如果您不反对使用jQuery，您可以使用这种方法。

$('li[data-status=1]').toggleClass(function(idx){
  return idx % 2 === 0 ? 'odd-status-one' : 'even-status-one'; 
});

下面是一个快速演示:http://jsbin.com/arawur/3/edit