借助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］"
一、首先是C3属性选择器
1. 每一个标签都有自己的属性，是吧？要给它一个样式，就可以通过它的属性来找到它。
2. 属性选择器的权重是10
3. 都有哪些？
- 标签名[属性名]
- 标签
- 标签名[type="属性名"]
- ^= 以icon开始的选出来
- $= 以icon结尾的选出来
- *= 代表任意位置，包含该属性的就要选出来
例子
二、结构伪类选择器
语法：
nth-child(n) 释义：
- 想要选哪个n就在那个里面输入数字几就可以了
- 这里的n 可以有特殊数值偶数even 奇数odd 有利于做隔行变色
- n可以是公式
- -n+5选出前5个。
例子
三、ntf-of-type 选择器
先上总结：
- nth-child(n) 选择父元素里面的第一个 n个孩子
- of-type 选择指定类型的元素
例子
四、伪类选择器
方式一 ::before ::after
方式二 :before :after
总结：伪元素前面可以是一个冒号，也可以是两个冒号，不影响结果
例子
