Page 213 - css揭秘

当然，我们还可以把这两种技巧组合起来使用，不过代码也会变得更加
复杂。假设我们希望在列表包含 2 ～ 6 个列表项时命中所有的列表项，可以
这样写：

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

试一试 play.csssecrets.io/styling-sibling-count
图 7-12
在分别包含了 3、4、8 个列表项
的列表中，li:first-child:nth-
last-child(-n+4), li:first- „ 选择符 相关规范
child:nth-last-child(-n+4) ~ http://w3.org/TR/selectors
li 会选中哪些元素

39 满幅的背景，定宽的内容

难题

在过去的几年间，有一种网页设计手法逐渐流行起来，我将它称作背景
宽度满幅，内容宽度固定。这个设计的一些典型特征如下。
„ 页面中包含多个大区块，每个区块都占据了整个视口的宽度，区块
的背景也各不相同。

„ 内容是定宽的，即使在不同分辨率下的宽度不一样，那也只是因为
媒体查询改变了这个固定的宽度值而已。在某些情况下，不同区块
的内容也可能具有不同的宽度。

有时候，整个网页都是由这种风格的多个区块组成的（比如图 7-13，

182 第 7 章 结构与布局

඀ࠡ JOEC