如何应用替代颜色，但仅适用于具有特定数据属性的元素

Question

我想以备用颜色制作li元素，但只有那些具有属性data-filetype="image".

的元素

只要我添加新的li而不添加data-filetype attribute，我的颜色序列就会失败。

链接到JSBin是here

HTML代码：

<ul> 
 <li data-filetype="image">PNG Image</li><!-- It should be RED -->
 <li data-filetype="image">PNG Image</li><!-- It should be ORANGE -->
 <li>Normal Link</li><!-- After adding this li color sequence breaks -->
 <li data-filetype="image">PNG Image</li><!-- It should be RED -->
 <li data-filetype="image">PNG Image</li><!-- It should be ORANGE -->
</ul>

CSS：

ul li[data-filetype="image"]:nth-child(2n){color:orange}
ul li[data-filetype="image"]:nth-child(2n+1){color:red}

Answer 1

使用jquery，即使添加了额外的元素，也可以获得备用的行颜色。请查看 DEMO 。

/ JQuery代码 /

$(document).ready(function(){

$("li[data-filetype='image']:even").css({'color':'red'});
$("li[data-filetype='image']:odd").css({'color':'blue'});
$("li:not([data-filetype='image'])").css({'color':'white'});
});