10個列表的不同CSS樣式 <li> 項目

Question

我在這里是這樣的：

<ul class="bwp-rc-ulist">

<li class="recent-comment">Item 1</li>
<li class="recent-comment">Item 2</li>
<li class="recent-comment">Item 3</li>
<li class="recent-comment">Item 4</li>
<li class="recent-comment">Item 5</li>
<li class="recent-comment">Item 6</li>
<li class="recent-comment">Item 7</li>
<li class="recent-comment">Item 8</li>
<li class="recent-comment">Item 9</li>
<li class="recent-comment">Item 10</li>

</ul>

我想添加以下CSS樣式：

li.list1, li.list6 { background-color: red; }
li.list2, li.list7 { background-color: blue; }
li.list3, li.list8 { background-color: black; }
li.list4, li.list9 { background-color: yellow; }
li.list5, li.list10 { background-color: gray; }

不幸的是，我不能這樣做，因為UL和LI是由wordpress插件（更好的Wordpress Comment＆Except插件）動態創建的。

我已經讀過一些nth-child的東西，但這並不能解決我的問題。 也許有人可以告訴我正確的腳本是什么？

我也在尋找一個適用於IE7-9，chrome和ff的腳本。

非常感謝你。

Answer 1

CSS解決方案

ul.bwp-rc-ulist li:nth-child(1),
ul.bwp-rc-ulist li:nth-child(6) {
    background-color: red;
}

ul.bwp-rc-ulist li:nth-child(2),
ul.bwp-rc-ulist li:nth-child(7) {
    background-color: blue;
}

ul.bwp-rc-ulist li:nth-child(3),
ul.bwp-rc-ulist li:nth-child(8) {
    background-color: black;
}

ul.bwp-rc-ulist li:nth-child(4),
ul.bwp-rc-ulist li:nth-child(9) {
    background-color: yellow;
}

ul.bwp-rc-ulist li:nth-child(5),
ul.bwp-rc-ulist li:nth-child(10) {
    background-color: gray;
}

或如果您更喜歡它：

ul.bwp-rc-ulist li:nth-child(5n+1) {
    background-color: red;
}

ul.bwp-rc-ulist li:nth-child(5n+2) {
    background-color: blue;
}

ul.bwp-rc-ulist li:nth-child(5n+3) {
    background-color: black;
}

ul.bwp-rc-ulist li:nth-child(5n+4) {
    background-color: yellow;
}

ul.bwp-rc-ulist li:nth-child(5n+5) {
    background-color: gray;
}

jQuery解決方案（使用CSS）

$('ul.bwp-rc-ulist li.recent-comment').each(function(index) {
    $(this).addClass("list" + (index + 1));
});​

Answer 2

HTML：

<ul id="ulEle"  class="bwp-rc-ulist">
    <li class="recent-comment">Item 1</li>
    <li class="recent-comment">Item 2</li>
    ...
</ul>

要么：

<div  id="ulEle">
    <ul  class="bwp-rc-ulist">
        <li class="recent-comment">Item 1</li>
        <li class="recent-comment">Item 2</li>
        ...
    </ul>
</div>

JS：

<script type="text/javascript">
  var ulGet=document.getElementById("ulEle");
  var liList=ulGet.getElementsByTagName("li");
  for(var i=0;i<liList.length;i++)
  {
      liList[i].style.className="list"+(parseInt(i)+1);
  }
</script>

Answer 3

試試這個CSS

http://jsfiddle.net/hVspz/

li:nth-child(6n+1) {  
  color: red; 
}

li:nth-child(6n+2) {  
  color: blue;
}

等等