使用 :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() 更加清晰，具有可读性。

很简单的东西，不为别的就为写代码一点一点的规范起来，有很强的可读性！加油！！