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

接下来我为大家介绍一种类似js效果的选择器，可以根据兄弟元素的数量来设置样式，那么我们开始吧。

程序员必读

Css3编码技巧

1. 当只有一项时的样式–only-child

one

.item:only-child{ /* 只有一个列表项时的样式 */
    background: gray;
}

2. 根据兄弟元素的数量范围来选择元素

1. 选择列表中第四项及以后的所有项

one

two

three

four

five

six

2. 列表至少有4项时选中所有项

one

two

three

four

five

3. 列表最多包含4项时选中所有项

one

two

three

four

4. 列表项在2-6项时选中所有项

one

two

three

four

five

six

/* 1. 选择列表中第四项及以后的所有项 */
.item:nth-child(n+4)

/* 2. 列表至少有4项时选中所有项 */
.item-1:first-child:nth-last-child(n+4),
.item-1:first-child:nth-last-child(n+4) ~ .item-1

/* 3. 列表最多包含4项时选中所有项 */
.item-2:first-child:nth-last-child(-n+4),
.item-2:first-child:nth-last-child(-n+4) ~ .item-2

/* 4. 列表项在2-6项时选中所有项 */
.item-3:first-child:nth-last-child(n+2):nth-last-child(-n+6),
.item-3:first-child:nth-last-child(n+2):nth-last-child(-n+6) ~ .item-3