10 个列表 <li> 项的不同 CSS 样式答案

【问题标题】：Different CSS Styles for 10 List <li> items10 个列表 <li> 项的不同 CSS 样式
【发布时间】：2012-09-02 22:28:43
【问题描述】：

我这里是这样的：

<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 评论和除外插件）。

我已经阅读了一些 nth-child thingy，但它并不能解决我的问题。也许有人可以告诉我正确的脚本是什么？

我也在寻找适用于 IE7-9、chrome 和 ff 的脚本。

非常感谢。

【问题讨论】：

为什么 nth-child 不工作？这似乎是最合适的解决方案。
@Anthony：“所有主流浏览器都支持 :nth-child() 选择器，IE8 和更早版本除外。” - w3schools.com/cssref/sel_nth-child.asp 编辑：这是一个 IE7/8 解决方案：stackoverflow.com/questions/8492121/ie8-nth-child-and-before

标签： javascript css html-lists

【解决方案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));
});

【讨论】：

您好 Yannis，感谢您的帮助。不幸的是，它在 IE7 和 IE8 中不兼容。但是非常感谢您的帮助。我真的很感谢你的努力！ :)
@ScarletAriadneVela 这就是我添加 jQuery 解决方案的原因；）Snger's Javascript solution 也应该在 IE7/8 中工作。不要如果您还没有使用 jQuery，请不要使用我的 jQuery 脚本，仅为此加载库将是一种矫枉过正。

【解决方案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>

【讨论】：

哇！斯格，谢谢你的帮助！关于这一行：
...如果您可以提供一个代码，将其称为 CLASS NAME "bwp-rc-ulist？而不是使用 getElementById("ulEle");？
忽略我的最后一个问题，我找到了一种方法如何插入 ID="ulEle" 以与您的代码对齐。非常感谢！我真的很想投票给你的答案，但不幸的是，我还是这里的新手，我还没有这个特权。我能做的就是接受你的正确答案。
:> How to Get Element By Class in JavaScript? How to getElementByClass instead of GetElementById with Javascript?

【解决方案3】：

试试这个css

http://jsfiddle.net/hVspz/

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

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

等等

【讨论】：

几个小错误，应该是5n+1，也就是我们要设置的background-color。
当然。我只是想提出一种方法而不是提供确切的解决方案:)