html怎么设置兄弟元素的样式,38、根据兄弟元素数量来设置样式

使用CSS的:nth-child一类的选择器(包括:nth-of-type)可以实现按元素数量来设置样式。下面的所有HTML结构都是每一行代表一个ul列表，每一个色块代表一个li元素。

对于只有一个元素时，使用:only-child。

// :only-child 表示：选择是唯一子元素的li元素

li:only-child{

background: #c80caa;

}

:only-child等效于 :first-child:last-child，一个元素既是第一个，也是最后一个，就表示只有他一个子元素。

// :only-child 表示：选择是唯一子元素的li元素

li:first-child:last-child{

background: #c80caa;

}

按照这个思路，如果一个元素，既是第一个，又是倒数第n个，就表示这个父元素中总共有n个子元素。

// 选择只有3个子元素的ul中的第一个li和只有5个子元素的ul中的第一个li

li:first-child:nth-last-child(3),

li:first-child:nth-last-child(5){

background: #c80caa;

}

组合兄弟选择器 ~ 使用可以选中所有的li。

// 选择只有3个子元素的ul中的第一个li和它之后的所有li，这样就选中了只有3个子元素的ul中的所有li元素

li:first-child:nth-last-child(3),

li:first-child:nth-last-child(3) ~ li{

background: #c80caa;

}

:nth-child()这类选择器还可以传入n作为参数，来打到一种至少和至多的效果，n将从0开始取值，取所有正整数。

// 选择至少包含3个li元素的ul元素中的所有li元素

li:first-child:nth-last-child(n+3),

li:first-child:nth-last-child(n+3) ~ li{

background: #c80caa;

}

// 将n设为负值，选择至多包含3个li元素的ul元素中的所有li元素

li:first-child:nth-last-child(-n+3),

li:first-child:nth-last-child(-n+3) ~ li{

background: #c80caa;

}

将两种情况组合，可以打到按照固定数量范围选择元素。

// 选择子元素数量在3~5之间的ul中的所有li元素

li:first-child:nth-last-child(n+3):nth-last-child(-n+5),

li:first-child:nth-last-child(n+3):nth-last-child(-n+5) ~ li{

background: #c80caa;

}