Page 211 - css揭秘

实 际 上，:only-child 等 效 于 :first-child:last-child， 道 理 很
简单：如果第一项同时也是最后一项，那从逻辑上来说它就是唯一的那一
项。:last-child 其实也是一个快捷写法，相当于 :nth-last-child(1)：

li:first-child:nth-last-child(1) {
/* 相当于li:only-child */
}

这个 1 其实是一个参数，我们可以根据需要来修改这个值。你能猜到
li:first-child:nth-last-child(4) 会命中哪些元素吗？如果从 :only-
child 的例子举一反三，认定这个选择符会在列表项总数为 4 时命中所有
列表项，那你可就太过乐观了。我们还没达到那个效果，但已经处在正确
的方向上了。让我们把这两个伪类分开来想一想：我们在找一个同时匹
配 :first-child 和 :nth-last-child(4) 的元素。因此，这个元素需要是
父元素的第一个子元素，同时还需要是从后往前数的第四个子元素。有哪个
元素可以满足这个条件呢？

答案就是，一个正好有四个列表项的列表中的第一个列表项（参见图
7-9）。这并不完全是我们想要的结果，但已经非常接近了。我们现在已经找
到一种命中特定数量列表项中第一项的方法，接下来就可以用兄弟选择符
（~）来命中它之后的所有兄弟元素：相当于在这个列表正好包含四个列表项
时，命中它的每一项，而这正是我们一直想要达成的目标：

li:first-child:nth-last-child(4),
li:first-child:nth-last-child(4) ~ li {
/* 当列表正好包含四项时，命中所有列表项 */
}
图 7-9
这个方法需要的代码还是相当冗长繁琐的。我们可以利用预处理器（比
在分别包含了 3、4、8 个列表项
的列表中，li:first-child:nth- 如 SCSS）来避免这个问题，不过现有预处理器的语法在处理这个需求时仍
last-child(4) 会选中哪些元素 然有些笨拙：

/* 定义mixin */ SCSS
@mixin n-items($n) {
&:first-child:nth-last-child(#{$n}),
&:first-child:nth-last-child(#{$n}) ~ & {
@content;
}
}

/* 调用时是这样的： */
li {
@include n-items(4) {
/* 属性与值写在这里 */
}
}

180 第 7 章 结构与布局

඀ࠡ JOEC