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>

马黑黑

实例演示：表格单双行背景色不同
 

马黑黑

编写CSS代码小技巧：

定义一个类选择器，如 dDiv ：

.dDiv { width: 600px; }

当我们需要其下的 p 标签拥有共同的样式，我们可以：

.dDiv p {
    color: black;
    font-size: 18px;
}

如此，在下面的代码中，所有的段落文本颜色是黑色、文本大小是18px：

<div class="dDiv">
    <p>段落一</p>
    <p>段落二</p>
    <p>段落三</p>
</div>

小辣椒

谢谢黑黑。这些都是平时做帖可以用上的，实用的教程，必须好好学习的

加林森

谢谢老黑。这个选择器很厉害啊。

马黑黑

小辣椒 发表于 2022-1-1 11:36
谢谢黑黑。这些都是平时做帖可以用上的，实用的教程，必须好好学习的

嗯，应该是很常用的

马黑黑

加林森 发表于 2022-1-1 11:48
谢谢老黑。这个选择器很厉害啊。

还行还行

加林森

马黑黑 发表于 2022-1-1 11:51
还行还行

走一个

马黑黑

加林森 发表于 2022-1-1 11:55
走一个

干杯

加林森

马黑黑 发表于 2022-1-1 11:56
干杯

干杯

马黑黑

加林森 发表于 2022-1-1 12:12
干杯

喝起

加林森

马黑黑 发表于 2022-1-1 12:36
喝起

好的

红影

可以分别选择子元素，这个功能还是很有用的

红影

想起你那个元旦祝福了，设置得真好看

马黑黑

红影 发表于 2022-1-1 15:04
可以分别选择子元素，这个功能还是很有用的

提高工作效率

马黑黑

红影 发表于 2022-1-1 15:04
想起你那个元旦祝福了，设置得真好看

它用上了 nth-child() 函数

红影

马黑黑 发表于 2022-1-1 18:07
提高工作效率

还能直接选择奇偶数和公式想定条件，让同一种类的选择变得简单。偏移量也能直接设定。真好

红影

马黑黑 发表于 2022-1-1 18:07
它用上了 nth-child() 函数

这个帖子的语言真幽默，看得笑

马黑黑

红影 发表于 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
还能直接选择奇偶数和公式想定条件，让同一种类的选择变得简单。偏移量也能直接设定。真好

这在编程世界里很正常