Page 210 - css揭秘

图 7-7
随着色块数量的不断增加，可用
空间也相应减少，我们需要不断
地缩减控件的尺寸。请注意，当
调色板中只有一个色块时，我
们做了特殊处理：隐去了删除
按钮。图中的颜色取自 Adobe
Color（http://color.adobe.com）
网站的下列调色 板：Agave
（http://color.adobe.com/agave-
color-theme-387108）；Sushi Maki
（https://color.adobe.com/Sushi-
Maki-color-theme-350205）

接下来的想法可能就是把 :nth-child() 和兄弟选择符（~）结合起来，
比如 li:nth-child(4), li:nth-child(4) ~ li。不过，这个选择符只能
命中第四个列表项以及在它之后的所有列表项（参见图 7-8），这跟列表项的
总数没有什么关系。由于并没有一种组合式选择符可以用“回头看”的方式
选中之前的兄弟元素，那么这个任务对 CSS 来说就注定要失败了吗？千万 图 7-8
不要轻易放弃！ 选择符 li:nth-child(4), li:nth-
child(4) ~ li 会选中哪些元素
解决方案

对于只有一个列表项的特殊场景来说，解决方案显然就是 :only-
child，这个伪类选择符就是为这种情况而设计的。它不仅可以成为一个很好
的起点，而且这个属性在某些场景下确实可以派上用场，因此可以在规范中
占有一席之地。举例来说，在图 7-7 中你可以发现，当列表中只有一个列表
项时，我们把删除按钮隐藏起来了；这个需求是可以由 :only-child 选择
符来完成的：

li:only-child {
/* 只有一个列表项时的样式 */
}

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

඀ࠡ JOEC