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>

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

Answer 1

如果问题是 如何选择具有特定属性的所有奇数元素？ ，那么可以在其他答案中解释，

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选择器等级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，所以停止等待并开始想出另一种方法：/

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

：[attribute = value]的nth-child（2n）

3 个答案: