CSS的:not選擇器

文章專區

網頁設計相關文章

之前介紹了:nth-child(n)和:nth-of-type(n)這兩項常見的選擇器，這次來介紹:not這個可能比較少見的選擇器。

not跟前兩者其實很像，只是選取的情況是「反過來」的，排除了指定的元素不被選取，也就是說，除了指定的元素以外的其他元素都會被選取。

寫法：

div:not(:first-child){ color:red; } div除了第一個以外其他都會變紅色

p:not(:nth-child(3n)){ display:none } p除了3的倍數的以外其他皆不會顯示

泛用性很廣，比如要排div順序為由左到右時，可能每個div會設個margin-right:10px的間隔，而最後一個會設:last-child { margin-right: 0 }

然而你卻可以改用not來選取其他的元素，設成div:not(:last-child){ margin:10px }即可。

例子：

CSS . div-list div:not(:last-child){ margin-right:10px;}

若你要設個導覽列的話，在每個標題右邊設框線(border-right)，但是最後一個不用，可以這樣設：

CSS

.not-list li:not(:last-child){ border-right:1px solid #fff;}

善加使用各項選擇器，對於 class選取元素的狀況，可以更靈活地應用掌握唷。