借助CSS3选择器:nth-child(2n+1)即可
<style>.list li:nth-child(2n+1) {
background: #39f
}
</style>
<ul class="list">
<li>《HTML5布局之路》</li>
<li>CSS3</li>
<li>特殊选择器</li>
<li>:nth-child()</li>
</ul>
步骤如下:ul li:nth-child(2n);ul li:nth-child(2n+1)
CSS部分:
.list {width:500pxmargin:0 auto}
.list ul {background:url(http://www.bluebirdsky.cn/images/upfiles/row_bg.gif)}
.list li {height:25pxline-height:25pxtext-align:leftpadding-left:10px}
Demo演示
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />
<meta name="Author" content="青鸟" />
<meat name="Author BlogURL" content="http://www.bluebirdsky.cn/[Bluebirdsky]"
很多方法都是可以实现值控制一个li样式而不影响其他的,最简单的是给第一个li设置一个id或者设置一个单独的class,也可以使用最新的css3选择器。
工具原料:编辑器、浏览器
1、设置类或者id的方法
简单的代码示例如下:
<body><ul>
<li id="special">111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li>555</li>
</ul>
<style>
#special{
background: #ccc
}
</style>
</body>
2、使用css3的选择器
<body><ul>
<li id="special">111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li>555</li>
</ul>
<style>
li:first-child
{
background-color:yellow
}
</script>
</body>