css中合理的使用nth-child实现布局

写这篇文章的目的。主要是今天要实现一个布局：li。每行三个，总数不定。仅仅能相邻的li之间须要10px的间距。效果例如以下图：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

大家能够先自己实现一下，我这里也是思考了非常久，最后整理了思绪，发现先给每一个li加入margin-right:10px;然后给第3n个加上margin-bottom:10px;而且去掉margin-right，当然了，假设类似最后一个图，正好最后一排三个的情况，可能最后一行会超出，所以在li的last-child上加上margin-bottom:0;（最后一条是后面补充的，当时忘了加上去，不好意思）

代码：

        li{
            margin-right: 10px;
        }

        li:nth-child(3n){
            margin-right: 0;
            margin-bottom: 10px;
        }

        li:last-child{
        margin-bottom:0;
        }