使用 :not() 選擇器來決定列表是否顯示邊框

使用 :not() 選擇器來決定表單是否顯示邊框

 

    <ul>
        <li>section 1</li>
        <li>section 2</li>
        <li>section 3</li>
        <li>section 4</li>
        <li>section 5</li>
        <li>section 6</li>
    </ul>

先爲元素添加邊框

/* 添加邊框 */
ul li {
  border: 1px solid #ccc;
}

如圖:

爲最後一個li去掉邊框；

/* 去掉邊框 */
ul li:last-child {
  border: none;
}

這麼作是在全部li加了border邊框的前提下，給最後一個li加none；若是有不少呢？是否是要用到li:nth-child(n)這樣樣式一個一個的寫呢？

 

那麼咱們使用 :not() 僞類來達到一樣的效果：

        ul{
            list-style: none;
        }
        li{
            padding: 15px;
            margin: 5px 0;
        }
        /*去掉邊框*/
        ul li:not(:last-child){
            border:1px solid #ccc;
        }

最終效果都同樣的；

固然，也能夠使用 .nav li + li 或者 .nav li:first-child ~ li ，可是 :not() 更加清晰，具備可讀性。

很簡單的東西，不爲別的就爲寫代碼一點一點的規範起來，有很強的可讀性！加油！！