10

我有一个行列表，每个行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我希望 is 1 的每个奇数data-status都有不同的背景，可以在 CSS 中做吗？

4

3 回答 3

14

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

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

或者以更简单的方式：

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

看看这篇关于如何nth-child工作的好文章。

相反，如果问题是如何选择具有特定属性的所有元素，然后只选择该子列表中的奇数？，好吧，这对于 CSS 来说还不可能，但它会使用CSS Selectors Level 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

编辑：正如 Michael_B 所报告的，此功能已被 CSS4 规范剥离，因此请停止等待并开始寻找另一种方法：/

于 2013-05-30T12:33:36.600 回答
3

我相信你能做到

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

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

于 2013-05-30T12:14:32.277 回答
0

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

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

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

于 2013-05-30T13:02:10.787 回答