title="CSS3 中的 :nth-child() 选择器的使用方法
时间： 2020-02-22 作者：立威浏览：
今天说一个在css3中不常用的到的选择器属性 :nth-child()，它可以方便的对某个HTML元素下的任何子元素进行操作，而要操作的HTML元素不分任何类型。
CSS3 :nth-child() 属性定义
:nth-child(n)：选择器匹配属于其父元素的第 N 个子元素，任何类型的元素都可以。
语法：
:nth-child(n)
参数：
n：可以为数字，公式或关键词
CSS3 :nth-child() 属性使用方法
HTML代码
<!DOCTYPE html><html><head>
<meta charset="UTF-8">
<title>Document</title>
<style>
li{
float: left;
list-style: none;
border: 0;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
background-color:red;
margin-left: 10px;
color:#fff;
}
</style></head><body>
<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>
</ul></body></html>运行结果：
以下所有的示例，都以上面的 html 代码为标准，只修改其CSS属性
示例1：
改成第二个 li 标签字体的颜色为蓝色
CSS代码：
li:nth-child(2){
background-color:blue;}运行结果：
注意：如果 li:nth-child() 中的参数为单个的数字，则表示第 n 个元素开始。
下面的示例中，使用了（an+b） 公式，a代表一个循环的大小，n是一个计数器（从0开始），b为偏移量。
示例2：
使前三个 li 标签的颜色为绿色
CSS代码：
li:nth-child(-n+3){
background-color:green;}运行结果：
注：-n+3 表示小于以及等于 3的标签
示例3：
前三个 li 标签除外，改变其余的所有标签
CSS代码：
li:nth-child(n+3){
background-color:green;}运行结果：
示例4：
改变偶数 li 标签的颜色
CSS代码1：
li:nth-child(2n){
background-color:green;}CSS代码2：
li:nth-child(even){
background-color:green;}运行结果：
说明：
1、代码1 与 代码2 是等价的
2、even 是用来表示偶数的关键词语
示例5：
改变奇数 li 标签的颜色
代码1：
li:nth-child(2n-1){
background-color:green;}代码2：
li:nth-child(odd){
background-color:green;}运行结果：
说明：
1、代码1 与 代码2 为等价的
2、odd 是用来表示 奇数 的关键词
示例6：
每隔 2 li标签，修改其颜色
CSS代码：
li:nth-child(3n-2){
background-color: green;}运行结果：
你觉得文章内容怎么样
解决win10以上操作系统不通过Microsoft store安装收费软件的方法
Excel的9个常用统计解决方案，即学即用，简单高效！
excel count函数：Count统计个数，学会这6种用法就够了
RouterOS 利用 DNSPod 的API接口实现DDNS解析