CSS有一個非常實用的選擇器,可以很方便的選取除了最后一個子元素以外的其他所有子元素,它就是:not(:last-child)
偽類選擇器。
父元素 :not(:last-child) { /* 這里放 css 樣式 */ }
使用這個選擇器可以很輕松的實現(xiàn)很多效果。例如,如果我們希望一個列表的每一行都有一個灰色的底色,但是最后一行沒有底色,這時就可以使用:not(:last-child)
偽類。
li:not(:last-child){ background-color: #ccc; }
這樣就可以很容易的給一個長度不確定的列表添加灰色背景了。
還有一個應用就是當我們想要給一個列表的每一個元素都添加一些外邊距時,但是又不想給最后一個元素添加外邊距。這時候也可以用:not(:last-child)
偽類選擇器把最后一個元素排除掉:
li:not(:last-child){ margin-bottom: 10px; }
這樣就可以讓列表元素之間保持統(tǒng)一的外邊距,但是最后一個元素卻不受影響。
除了:last-child
之外,還有很多其他的偽類選擇器可以幫助我們更加精確的選擇元素,比如:first-child
選擇第一個子元素、:nth-child()
選擇第 n 個子元素等。多加嘗試,你會發(fā)現(xiàn) CSS 的魅力無窮。