html - 如何将替代颜色应用于仅具有特定数据属性的那些元素

我想用其他颜色创建li元素，但只有那些元素有属性data-filetype="image".
只要添加一个新的li而不添加data-filetype attribute，我的颜色序列就会失败。
链接到JSBinhere
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}

最佳答案

使用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'});
});