使用 :not() 選擇器來決定列表是否顯示邊框 -开发者知识库

使用 :not() 選擇器來決定列表是否顯示邊框 -开发者知识库,第1张

使用 :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;
}

如圖:

使用 :not() 選擇器來決定列表是否顯示邊框 -开发者知识库,第2张

為最后一個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;
}

最終效果都一樣的;

使用 :not() 選擇器來決定列表是否顯示邊框 -开发者知识库,第3张

當然,也可以使用 .nav li li 或者 .nav li:first-child ~ li ,但是 :not() 更加清晰,具有可讀性。

很簡單的東西,不為別的就為寫代碼一點一點的規范起來,有很強的可讀性!加油!!

 

最佳答案:

本文经用户投稿或网站收集转载,如有侵权请联系本站。

发表评论

0条回复