Page 212 - css揭秘

向 André Luís（http://andr3.net）脱帽致敬，感谢他提出的一个想法启
发了本节的技巧（http://andr3.net/blog/post/142）。

根据兄弟元素的数量范围来匹配元素 致 敬

在实际的应用场景中，我们期望匹配元素的条件往往并不是列表项的具
小提示
体数量，而是一个数量范围。:nth-child() 选择符在这方面非常好用，我
们可以用它来命中一个范围，比如“选中第 4 项之后的所有项”这样的需求 :nth-* 选择符确实不是那
么容易理解。如果你在这方面有
就完全不在话下。它的参数不仅可以是简单的数字，也可以是像 an+b 这样
困惑的话，可以在网上找一个测
的表达式（比如 :nth-child(2n+1)）。这里的 n 表示一个变量，理论上的范 试工具来试验各种表达式的效果。
围是 0 到 + ∞（在实际情况下，由于页面中元素的数量本来就是有限的，超 我 就 写 过 一 个 这 样 的 工 具 lea.
过某个特定数量的值实际上也没有元素可选了）。如果使用 n+b 这种形式的 verou.me/demos/nth.html，此外
还有很多类似的工具可以选择。
表达式（此时相当于 a 的取值为 1），那么不论 n 如何取值，这个表达式都
无法产生一个小于 b 的值。因此，n+b 这种形式的表达式可以选中从第 b 个
开始的所有子元素。举例来说，:nth-child(n+4) 将会选中除了第一、二、
三个子元素之外的所有子元素（参见图 7-10）。
图 7-10
在分别包含了 3、4、8 个列表项
的列表中，li:nth-child(n+4)
会选中哪些元素

利用这个技巧，我们可以在列表项的总数是 4 或更多时选中所有列表
项（参见图 7-11）。在这种情况下，我们可以把表达式 n+4 传给 :nth-last-
child()：

li:first-child:nth-last-child(n+4),
li:first-child:nth-last-child(n+4) ~ li {
/* 当列表至少包含四项时，命中所有列表项 */
}

同理，-n+b 这种形式的表达式可以选中开头的 b 个元素。因此，仅当
列表中有 4 个或更少的列表项时（参见图 7-12），要选中所有列表项可以这
样写： 图 7-11
在分别包含了 3、4、8 个列表项
li:first-child:nth-last-child(-n+4), 的列表中，li:first-child:nth-
li:first-child:nth-last-child(-n+4) ~ li { last-child(n+4), li:first-
/* 当列表最多包含四项时，命中所有列表项 */
} child:nth-last-child(n+4) ~
li 会选中哪些元素

38 根据兄弟元素的数量来设置样式 181

඀ࠡ JOEC