代码如下：
li:nth-child(3n)
{
background:#ff0000
}
CSS即层叠样式表(Cascading StyleSheet)。 在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。
CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括: 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。
有的，包括：“:not(:first-child)”、“:nth-child(n+2)”两种方式。
1、:not(:first-child)：其中，E:not(s)表示匹配所有不匹配简单选择符s的元素E，E:first-child匹配同级兄弟元素中的第一个E元素。
2、:nth-child(n+2)：其中nth-child表示第几个son，n+2表示从第二个开始(即所有的n都是取从0开始的自然数)。
扩展资料：
css3中相关的选择器：
1、E:root ：匹配文档的根元素。在HTML（标准通用标记语言下的一个应用）中，根元素永远是HTML
2、E:nth-child(n)：匹配父元素中的第n个子元素E
3、E:nth-last-child(n)：匹配父元素中的倒数第n个结构子元素E
4、E:nth-of-type(n)：匹配同类型中的第n个同级兄弟元素E
5、E:nth-last-of-type(n)：匹配同类型中的倒数第n个同级兄弟元素E
6、E:last-child：匹配父元素中最后一个E元素
7、E:first-of-type：匹配同级兄弟元素中的第一个E元素
8、E:only-child：匹配属于父元素中唯一子元素的E
9、E:only-of-type：匹配属于同类型中唯一兄弟元素的E
参考资料来源：百度百科-css3
第一种方法CSS3：-------------------------------------<!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>
