[英]Different CSS Styles for 10 List <li> items
What i have here is this: 我在这里是这样的:
<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>
I want to add the following CSS styles: 我想添加以下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; }
unfortunately, i cannot do that because the UL & LI is dynamically created by a wordpress plugin (Better Wordpress Comment & Except Plugin). 不幸的是,我不能这样做,因为UL和LI是由wordpress插件(更好的Wordpress Comment&Except插件)动态创建的。
I've already read some nth-child thingy but it doesn't solve my case. 我已经读过一些nth-child的东西,但这并不能解决我的问题。 maybe if someone can show me what the correct scripts?
也许有人可以告诉我正确的脚本是什么?
I'm also looking for a script that works in IE7-9, chrome and ff. 我也在寻找一个适用于IE7-9,chrome和ff的脚本。
Thank you very much. 非常感谢你。
CSS solution 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;
}
or if you prefer it a bit more compact: 或如果您更喜欢它:
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 solution (with your CSS) jQuery解决方案(使用CSS)
$('ul.bwp-rc-ulist li.recent-comment').each(function(index) {
$(this).addClass("list" + (index + 1));
});
HTML: HTML:
<ul id="ulEle" class="bwp-rc-ulist">
<li class="recent-comment">Item 1</li>
<li class="recent-comment">Item 2</li>
...
</ul>
OR: 要么:
<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: 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>
try this css 试试这个CSS
http://jsfiddle.net/hVspz/ http://jsfiddle.net/hVspz/
li:nth-child(6n+1) {
color: red;
}
li:nth-child(6n+2) {
color: blue;
}
and so on 等等
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.