Page 209 - css揭秘

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

难题

在某些场景下，我们需要根据兄弟元素的总数来为它们设置样式。最常
见的场景就是，当一个列表不断延长时，通过隐藏控件或压缩控件等方式来
节省屏幕空间，以此提升用户体验。下面列出了一些典型案例。

„ 电子邮件列表或包含文本内容的类似列表。如果列表中只有少量列
表项，我们可以为第一项展示出多行预览文字；当列表项不断增加
时，需要逐渐减少每一项的预览行数；当列表的总长度超出整个视
口的高度时，可能会把预览文字完全隐藏，并把按钮变小，以此避
免用户对页面的滚动。
„ 待办事项应用程序。当列表中的事项较少时，我们可以用一个较大
的字号来显示所有事项；随着事项的数量不断增加，我们会不断减
小字号来显示每个事项。
„ 调色板应用程序，每个色块上都显示出配套的控件。当色块的数量
不断增加时，它们所占据的空间也会相应增加，此时我们可能希望
色块的控件变得紧凑一些（参见图 7-7）。

„ 包含多个 <textarea> 元素的应用程序。每当我们添加一个新的
<textarea> 元素，所有元素都会同步缩小（类似于 bytesizematters.
com 的效果）。

不过，对 CSS 选择符来说，基于兄弟元素的总数来匹配元素并不简单。
设想一个列表，假设仅当列表项的总数为 4 时才对这些列表项设置样式。我
1①
们可以用 li:nth-child(4) 来选中列表的第四个列表项，但这并不是我们
想要的；我们需要在列表项的总数为 4 时选中每一个列表项。

① 本节用到的都是 :nth-child() 选择符，但我们讨论的所有内容也适用于 :nth-of-type() 选
择符，而且它在语义上往往更加贴切，因为在所有的兄弟元素中可能包含了不同的元素类
型，而我们往往只关心同类型的元素。本节的示例用到的是列表项，但我们讨论的技巧同样
适用于其他类型的元素。

178 第 7 章 结构与布局

඀ࠡ JOEC