CSS技巧-根据兄弟元素的数量来设置样式

场景

我们在写一些类似朋友圈晒图的九宫格布局时，经常会遇到一下几种情况：

1.只有一张图

2.只有两张图

3.只有三张图

4.只有四张图

5.四张图以上等

最终实现：

See the Pen <a href="https://codepen.io/xiangshuo1992/pen/MQmwam/">MQmwam</a> by Luke.Deng (<a href="https://codepen.io/xiangshuo1992">@xiangshuo1992</a>) on <a href="https://codepen.io">CodePen</a>.

当然实际的表现要根据产品需求来定，还有其他一些需要根据兄弟元素的数量来设置不同样式的需求。那我们如何实现呢？以前我是给不同的情况通过JS添加不同的类名，现在发现可以直接通过CSS的:nth-child来实现，同样:nth-of-type也是适用的，接下来我们就来了解这种解决思路吧！

解决方案

定义和用法

:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。

:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.

n 可以是数字、关键词或公式。

element1~element2 选择器 element1 之后出现的所有 element2。

两种元素必须拥有相同的父元素，但是 element2 不必直接紧随 element1。

下面我们以:nth-child(n) 为例来考虑如何解决问题，给每个

li

加类名

item-img

情况一：只有一张图

//该子元素是唯一的
.item-img:only-child{
width: 50%;
}

或者

//该子元素既是第一个子元素，又是最后一个子元素，则说明只有一个子元素
.item-img:first-child:last-child{
width: 50%;
}

情况二：只有两张图

.item-img:first-child:nth-last-child(2),
.item-img:first-child:nth-last-child(2) ~ .item-img{
width: 40%;
}

把上面的样式解读就是：

1.该子元素既是第一个，同时又是从后往前数第二个，能满足这个条件的只有一个正好有2个列表项的列表中的第一个列表项

2.有且只有两个子元素，找到第一个子元素，（ ~ ）及其后面所有

.item-img

类的兄弟元素（也就是所有的子元素）。

其他情况同理

.item-img:first-child:nth-last-child(4),
.item-img:first-child:nth-last-child(4) ~ .item-img{
width: 35%;
}

扩展

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

//n为0 ~ +∞
:nth-child(an+b)

我们常用这样的表达来寻找某些元素，比如：

:nth-child(2n+1)会找到第1,3,5,7,9…个元素

:nth-child(3n+3)会找到第3,6,9…个元素（可以用来去除边界元素的边距）

:nth-child(n+4)会找到第4个元素开始的后面所有元素

n+b 这种形式的表达式可以选中从第 b 个开始的所有子元素。

利用这个原理和之前确定兄弟元素数量的方法，我们可以做如下操作：

li:first-child:nth-last-child(n+4),
li:first-child:nth-last-child(n+4) ~ li {
/* 没有n时代表刚好4项，加上n时代表至少包含4项*/
/* 当列表至少包含4项时，命中所有列表项 */
}

同理， -n+b 这种形式的表达式可以选中开头的 b 个元素。

li:first-child:nth-last-child(-n+4),
li:first-child:nth-last-child(-n+4) ~ li {
/*仅当列表中有 4 个或更少的列表项时，选中所有列表项。*/
/* 当列表最多包含4项时，命中所有列表项 */
}

结合使用：

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项时，命中所有列表项 */
}

解读：该子元素是第一个子元素的前提下还要满足

:nth-last-child(n+2):nth-last-child(-n+6)

，注意这里的n是不同的，所以会让该公式计算的结果唯一。

:nth-last-child(0+2):nth-last-child(-4+6)   //2
:nth-last-child(1+2):nth-last-child(-3+6)   //3
:nth-last-child(2+2):nth-last-child(-2+6)   //4
:nth-last-child(3+2):nth-last-child(-1+6)   //5
:nth-last-child(4+2):nth-last-child(-0+6)   //6

总结

我们主要是利用了CSS中的伪类，

:first-child

、

:only-child

、

nth-last-child(n)

以及兄弟选择符

~

来实现各种数量子元素样式的操作，这样处理首先不需要再通过JS动态添加类了，最大程度的解耦，其次是打开了我们对选择器的思路，同时还想到也可以利用相邻元素

+

来做一些相应的样式设置，是很好的实践。