css 去除标签中最后一个子元素的margin（3种方式）

最近遇到的在布局的时候，最后一个margin不想要，虽然很简单，但还是想总结一下。
先上公用代码：
css

        * {
            padding: 0px;
            margin: 0px;
            box-sizing: border-box;
        }
        
        body {
            width: 1200px;
            margin: 0px auto;
        }
        
        li {
            list-style: none;
        }
        
        ul {
            width: 200px;
            border: solid 1px green;
            margin: 100px auto;
            padding: 20px;
            box-sizing: content-box;
        }
        
        li {
            height: 100px;
            width: 200px;
            border: solid 1px red;
        }

html

<ul>
        <li>

        </li>
        <li>

        </li>
        <li>

        </li>
        <li>

        </li>
    </ul>

主要有三种方式：
方式1：
last-child

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

方式2:
li + li

        li+li {
            margin-top: 10px;
        }

方式3：
not(:last-of-type)

        li:not(:last-of-type) {
            margin-bottom: 10px;
        }

最后展现形式就是这样的：

简而言之，就各种标签获取的方式不同。