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

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

// :only-child 表示:选择是唯一子元素的li元素
li:only-child{
    background: #c80caa;
}
38、根据兄弟元素数量来设置样式_第1张图片

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

// :only-child 表示:选择是唯一子元素的li元素
li:first-child:last-child{
    background: #c80caa;
}
38、根据兄弟元素数量来设置样式_第2张图片

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

// 选择只有3个子元素的ul中的第一个li和只有5个子元素的ul中的第一个li
li:first-child:nth-last-child(3),
li:first-child:nth-last-child(5){
    background: #c80caa;
}
38、根据兄弟元素数量来设置样式_第3张图片

组合兄弟选择器 ~ 使用可以选中所有的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;
}
38、根据兄弟元素数量来设置样式_第4张图片

: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;
}
38、根据兄弟元素数量来设置样式_第5张图片
// 将n设为负值,选择至多包含3个li元素的ul元素中的所有li元素
li:first-child:nth-last-child(-n+3),
li:first-child:nth-last-child(-n+3) ~ li{
    background: #c80caa;
}
38、根据兄弟元素数量来设置样式_第6张图片

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

// 选择子元素数量在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;
}
38、根据兄弟元素数量来设置样式_第7张图片

你可能感兴趣的:(38、根据兄弟元素数量来设置样式)