#书摘 #css #前端
《CSS 选择器世界》:nth-child()伪类和:nth-last-child()伪类
:nth-last-child()伪类和:nth-child()伪类的区别在于：
:nth-last-child()伪类是从后面开始按指定序号匹配，而:nth-child()伪类是从前面开始匹配。

除此之外，无论是在兼容性还是语法方面，两者都没有区别。因此，本节会以:nth-child()为代表对这两个伪类进行详细且深入的介绍。

1. 从:nth-child()开始说起
在介绍语法之前，有必要提一句，:nth-child()伪类虽然功能很强大，但只适用于内容动态、无法确定的匹配场景。如果数据是纯静态的，哪怕是列表，都要使用类名或者属性选择器进行匹配。没有必要使用 :nth-child()，因为这样会增加选择器的优先级，且由于DOM结构严格匹配，无法随意调整，不利于维护。

:nth-child()伪类可以匹配指定索引序号的元素，支持一个参数，且必须有参数，参数可以是关键字值或者函数符号这两种类型。
(1)关键字值的形式如下。
● odd ：匹配第奇数个元素，如第1个元素、第3个元素、第5个元素……
● even ：匹配第偶数个元素，如第2个元素、第4个元素、第6个元素……
可以这样记忆：如果字母个数是奇数（odd有3个字母），就匹配奇数个数的元素；如果字母个数是偶数（even有4个字母），就匹配偶数个数的元素。
奇偶匹配关键字多用在列表或者表格中，可以用来实现提升阅读体验的斑马线效果。
(2)函数符号的形式如下。
● An+B：其中A和B都是固定的数值，且必须是整数；n可以理解为从0开始的自然数序列(0, 1, 2, 3, …)，n前面可以有负号。第一个子元素的匹配序号是1，小于1的计算序号会被忽略。
下面来看一些示例，快速了解一下各种类型的参数的含义。
● tr:nth-child(odd) ：匹配表格的第1, 3, 5行，等同于tr:nth-child(2n+1)。
● tr:nth-child(even) ：匹配表格的第2, 4, 6行，等同于tr:nth-child(2n)。
● :nth-child(3) ：匹配第3个元素。
● :nth-child(5n) ：匹配第5, 10, 15, …个元素。其中5=5×1，10=5×2，15=5×3……
● :nth-child(3n+4) ：匹配**第4, 7, 10, …个元素**。其中4=(3´0)+4，7=(3´1)+4，10=(3´2)+4……
● :nth-child(-n+3) ：匹配**前3个元素**，因为−0+3=3，−1+3=2，−2+3=1。
● li:nth-child(n) ：匹配所有的 <li> 元素，就匹配的元素而言和li标签选择器一模一样，区别是优先级更高了。实际开发中总是避免过高的优先级，因此没有理由这样使用。
● li:nth-child(1) ：匹配第一个 <li> 元素，和li:first-child匹配的作用一样，区别是后者的兼容性更好，因此，**也没有这样使用的理由**，可以使用li:first-child代替。
● li:nth-child(n+4):nth-child(-n+10) ：匹配第4～10个 <li> 元素，这个就属于比较高级的用法了。例如，考试成绩前3名的有徽章，第4名～第10名的高亮显示，此时，这种**正负值组合**的伪类非常好用。

2. 动态列表项数量匹配技术
聊天软件中的群头像或者一些书籍的分组往往采用复合头像作为一个大的头像，可以看到如果头像数量不同，布局就会不同。（如微信群组）

借助子索引伪类自动判断列表项的个数，从而实现我们想要的布局。在这个方法中，不需要在父元素上设置当前列表项的个数，因此，HTML看起来平淡无奇：

<ul class="box">
<li></li>
<li></li>
<li></li>
...
</ul>​​


关键在于CSS，我们可以借助伪类判断当前列表项的个数，示意代码如下：

/* 1个 */
li:only-child {}
/* 2个 */
li:first-child:nth-last-child(2) {}
/* 3个 */
li:first-child:nth-last-child(3) {}
...​​


> 其中，:first-child:nth-last-child(2) 表示当前 <li> 元素既匹配第一个子元素，又匹配从后往前的第二个子元素，因此，我们就能判断当前总共有两个 <li> 子元素，从而精准实现我们想要的布局了，只需要配合使用相邻兄弟选择符加号(+)以及兄弟选择符(~)。例如：


/* li列表项的数量大于或等于5时所有元素宽度为33.333% */
li:first-child:nth-last-child(n+5),
li:first-child:nth-last-child(n+5) ~ li {
width: calc(100% / 3);
}​​


以上是不是一个非常巧妙的实现呢？
总之，基于上面的数量匹配原理就能自动实现不同列表项数量下的不同布局效果，而无须设置专门表示列表项数量的类名或者属性。
读者可以手动输入 https://demo.cssworld.cn/selector2/8/3-3.php 体验与学习。

https://memo.cosine.ren/m/351

demo.cssworld.cn

动态列表数量匹配技术 » CSS选择器世界demo演示

CSS选择器世界demo实例演示页面之 动态列表数量匹配技术