<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>选择某个区间的元素-CSS3</title>
<style>
ul{ width:50%}
li{ background:#f5f5f5 border-bottom:1px solid #ddd padding:5px 0 }
ul li:nth-child(-n+7){ background:#F90}
ul li:nth-child(-n+3){ background:#f5f5f5}
</style>
</head>
<body>
<h2>设置第4~7个li的背景色为橙色</h2>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
</ul>
</body>
</html>
第二种方法JS：-------------------------------------
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>选择某个区间的元素-JS</title>
<style>
ul{ width:50%}
li{ background:#f5f5f5 border-bottom:1px solid #ddd padding:5px 0 }
</style>
<script src="
<script>
$(function(){
$("ul li:lt(7)").css("background","#F90")
$("ul li:lt(3)").css("background","#f5f5f5")
})
</script>
</head>
<body>
<h2>设置第4~7个li的背景色为橙色</h2>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
</ul>
</body>
</html>
nth-child可以选择单个元素，也可以实现一个范围，如:
<ul><li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
上面是一个列表
1.选择单个标签元素（指定序列的单个元素）.
li:nth-child(1)
{
color: red
}
执行上面的CSS，<li>1</li>在界面上面表现为红色
2.选择一个范围的标签元素（偶数序列的元素）.
li:nth-child(2n)
{
color: red
}
执行上面的CSS，<li>2</li><li>4</li><li>6</li>在界面上显示红色
上面的CSS还可以如下面这样写：
li:nth-child(even)
{
color: red
}
这两个CSS都代表选择li所在的顺序为偶数位置的标签元素。
3.奇数序列的元素使用odd或者2n+1
