CSS3:nth-child(n)选择器
CSS3:nth-child(n)选择器 | 马黑黑nth-child(n)选择器匹配父元素中的第n个子元素。
关于父元素、子元素，在html里，它们形同现实生活中的父子关系一样，存在父子间的隶属关系。下面的三个div代码，最外层的div是父元素，里层有两个并列的div，是大哥二哥两兄弟，它们是子元素，隶属于上层的父div：
<div>
<div>大哥</div>
<div>二哥</div>
</div>
大哥二哥它们也可以拥有自己的孩子：
<div>
<div>
<div>大哥的孩子</div>
</div>
<div>
<div>二哥的孩子</div>
</div>
</div>
如果需要，父子元素可以无限嵌套下去，所谓“子子孙孙无穷尽也”。
好，回到正题：nth-child(n)选择器。开篇提及，它用来匹配父元素中指定的子元素，这在可以超生的年代处理讨儿媳妇时是很有用的。试想一下，儿子多如牛毛，没钱给他们讨媳妇，现在要选出一部分去倒插门。都选谁好呢？用nth-child(n)来设定个规矩吧，谁匹配谁去入赘。
nth-child(n)中的n是个索引，比如老大的索引是1，老二的是2，以此类推。n可以是数值，也可以是关键字，还可以是一个公式。孩子多了，一个一个给索引数字麻烦，就用关键字（比如奇数、偶数），有特殊需要则可以用公式。
例子：
nth-child(1) - 老大上门
nth-child(3) - 老三也上门
nth-child(odd) - 排行一三五也就是奇数的统统去上门
nth-child(even) - 排行二四六也就是偶数的统统上门去
nth-child(an+b) - an+b是公式，这个得开个家庭委员会讨论一下——
an+b，a代表一个循环的大小，比方说是2，那a就是2；n是计数器，从0开始，然后以1步进；b是偏移量，比如1或2或其他的都行。看下面的公式和说明就能理解：
2n+2
【解释】这个公式的设计是为了保老大啊：循环大小是2，偏移量也是2，再怎么着老大都不用上门做女婿了。n从0开始，那么第一个要上门的是谁？2*0+2=2，老二；第二个上门兄弟 2*1+2=4，老四；第三个：2*2+2=6，老六；第四个：2*3+2=8，老八。记住，n是计数器，从0开始一路加1，偏移量b定好了就不会改变。
下面给出一个nth-child()选择器的实例代码：本例我们做一张表格，表格的单数行和双数行设置了不同的背景色：
<style type="text/css">
.tbl { margin:0 auto;border-collapse: collapse;width:460px; }
.tbl tr:nth-child(odd) { background:#aaa;height:20px; }
.tbl tr:nth-child(even) { background:#eee;height:20px; }
</style>
<table class="tbl">
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
</table>
<p>实例演示：表格单双行背景色不同<br> </p>
<style type="text/css">
.tbl { margin:0 auto;border-collapse: collapse;width:460px; }
.tbl tr:nth-child(odd) { background:#aaa;height:20px; }
.tbl tr:nth-child(even) { background:#eee;height:20px; }
</style>
<table class="tbl">
<tbody><tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
</tbody></table> 编写CSS代码小技巧：
定义一个类选择器，如 dDiv ：
.dDiv { width: 600px; }
当我们需要其下的 p 标签拥有共同的样式，我们可以：
.dDiv p {
color: black;
font-size: 18px;
}
如此，在下面的代码中，所有的段落文本颜色是黑色、文本大小是18px：
<div class="dDiv">
<p>段落一</p>
<p>段落二</p>
<p>段落三</p>
</div> 谢谢黑黑。这些都是平时做帖可以用上的，实用的教程，必须好好学习的{:4_178:} 谢谢老黑。这个选择器很厉害啊。{:4_199:} 小辣椒 发表于 2022-1-1 11:36
谢谢黑黑。这些都是平时做帖可以用上的，实用的教程，必须好好学习的
嗯，应该是很常用的 加林森 发表于 2022-1-1 11:48
谢谢老黑。这个选择器很厉害啊。
还行还行 马黑黑 发表于 2022-1-1 11:51
还行还行
走一个{:4_191:} 加林森 发表于 2022-1-1 11:55
走一个
干杯 马黑黑 发表于 2022-1-1 11:56
干杯
干杯 加林森 发表于 2022-1-1 12:12
干杯
喝起 马黑黑 发表于 2022-1-1 12:36
喝起
好的 可以分别选择子元素，这个功能还是很有用的{:4_199:} 想起你那个元旦祝福了，设置得真好看{:4_199:} 红影 发表于 2022-1-1 15:04
可以分别选择子元素，这个功能还是很有用的
提高工作效率 红影 发表于 2022-1-1 15:04
想起你那个元旦祝福了，设置得真好看
它用上了 nth-child() 函数 马黑黑 发表于 2022-1-1 18:07
提高工作效率
还能直接选择奇偶数和公式想定条件，让同一种类的选择变得简单。偏移量也能直接设定。真好{:4_187:} 马黑黑 发表于 2022-1-1 18:07
它用上了 nth-child() 函数
这个帖子的语言真幽默，看得笑{:4_173:} 红影 发表于 2022-1-1 19:40
这个帖子的语言真幽默，看得笑
CSS有继承理念，你看 child 不就是孩子么？我的幽默从此而来。
关于继承，比方说，父层设置的东东，如果子层不再设置，则道理上子层继承父层的设置：
.father { font-size:18px;color:red; }
.son {width:260px;height:120px; }
那么：
<div class="father">
<div class="son">2022你嚎</div>
</div>
“2022你嚎”的字体颜色为红色、大小为18px 红影 发表于 2022-1-1 19:39
还能直接选择奇偶数和公式想定条件，让同一种类的选择变得简单。偏移量也能直接设定。真好
这在编程世界里很正常
页:
[1]
2