CSS 揭秘(7)--根据兄弟元素的数量来设置样式

Posted by liveipool on February 9, 2017

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

在某些场景下,我们需要根据兄弟元素的总数来为它们设置样式。最常见的场景就是,当一个列表不断延长时,通过隐藏控件或压缩控件等方式来节省屏幕空间,以提升用户体验。
因此,我们非常想清楚的知道兄弟元素的数量。

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

接下来的想法就是把 :nth-child() 和 兄弟选择符(~)结合起来,不过,如 li:nth-child(4) ~ li只能命中第四个列表项以后的所有列表项。(不包括第四各列表项)

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

实际上,:only-child 等效于 :first-child:last-child,道理很简单,如果第一项也是最后一项,那就说明总共只有一项。另外,也可以写为 :first-child:nth-last-child(1) 。

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

下面以此类推:

li:first-child:nth-last-child(4),
li:first-child:nth-last-child(4) ~ li {
	// 当列表正好包含四项时,命中所有列表项
}

:nth-child 这类的选择符非常好用,因为它们还可以接收变量n作为参数,如 :nth-child(n+4)将会选中第四个及以后所有的子元素。也就是除了第一、二、三个子元素外的所有子元素。

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

同理 -n+b 这种形式可以命中开头的b个元素,如 -n+3 就命中第一、二、三个子元素。

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

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项时,命中所有列表项。
}