css猫头鹰选择器

除了第一个以外的兄弟选择器。由于看起来像猫头鹰，也叫猫头鹰选择器。

 <ul class="site-nav">
        <li><a href="">首页</a></li>
        <li><a href="">财经</a></li>
        <li><a href="">军事</a></li>
        <li><a href="">社会</a></li>
        <li class="nav-right"><a href="">美食</a></li>
    </ul>

.site-nav {
            display:flex;
            padding:10px;
            list-style: none;
            background:#242425;         
        }
        .site-nav > li {
            background-color:#177ddc;
            padding: 5px 10px;
        }
        .site-nav > li > a{
            display: block;
            color:white;
            text-decoration: none;
        }
      // 除了第一个以外的兄弟选择器
        .site-nav > li + li {
            margin-left:30px;
        }
        .site-nav > .nav-right {
            margin-left: auto;
        }