WEB - 用CSS实现微信群头像

先来看下思路

1
2
3
4
5
6
<ul class="box">
<li></li>
<li></li>
<li></li>

</ul>
1
2
3
4
5
6
7
8
9
li:first-child:nth-last-child(2) { /* 2个 */ }
li:first-child:nth-last-child(3) { /* 3个 */ }

/* 3个li项目的第1个列表项 */
li:first-child:nth-last-child(3) {}
/* 3个li项目的第1个列表项的后一个,也就是第2项的样式 */
li:first-child:nth-last-child(3) + li {}
/* 3个li项目的第一个列表项后面两个列表项,也就是第2项和第3项的样式 */
li:first-child:nth-last-child(3) ~ li {}

在以上案例中发现,CSS的伪类是可以级联使用的,例如,列表可以匹配:first-child:nth-last-child(2)则表示当前li元素即是第1个子元素,又是从后往前第2个子元素,因此我们就能判断当前总共两个li子元素,想要实现我们的效果,只需要配合相邻兄弟选择符加号 + 以及兄弟选择符 ~即可。快上车…

九格

六格

五格

四格

代码

Github…好用别忘给小星星