Skip to content

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

当兄弟元素有 4 个时选中第一个

下面样式只命中,列表项刚好为 4 个时的第 1 个列表项

css
li:first-child:nth-last-child(4) {
	background: deeppink;
}

匹配某个范围的兄弟元素

:nth-child()可以接受一个变量an+bn 的范围是 $[0,+ \infty)$ ,所以 n+b 可以选中从第 b 个开始的所有子元素

css
/* 选中从第 4 个开始的所有子元素 */
li:nth-child(n+4) {
    background: deeppink;
}

同理,-n+b 可以选中 第 b 个(包括 b)前的所有子元素

css
li:nth-child(-n+4) {
    background: deeppink;
}

则二者叠加即可选中某个范围,如 $[2,6]$ 的元素

css
li:nth-child(n+2):nth-child(-n+6) {
    background: deeppink;
}

根据兄弟元素的数量范围来匹配元素

结合前面两个知识点

匹配当且仅当兄弟元素数量为 $[2,6]$ 的时候的全部兄弟元素

css
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 {
    background: deeppink;
}