css3怎么设置奇数个的li背景色？？

html-css05

css3怎么设置奇数个的li背景色？？,第1张

借助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>