【CSS】偽元素:not，使用過後保證愛上

在CSS中，:not(   )的意思就是，(  )內的東西不要套用到設定的屬性。
(  )內放置的範圍非常廣，以下介紹幾種使用方式：

1. className
2. 偽類  :hover
3. 偽類  :last-child 
4. 多個not合併使用

1. className
設定button的背景色，但是在  button class=“disabled” 的時候不要套用。

button:not(.disabled){ background: #333 }

2. 偽類  :hover
設定button的背景色，但是在滑鼠移過的時候不要使用

button:not(:hover){ background: #333 }

3. 偽類  :last-child / :first-child
設定button的右間距，當有一排button時，最後一個不會產生右間距

button:not(:last-child){ margin-right: 0.5em; }

4. 多個not合併使用
每一列第1個和第2個td，不套用該背景色

table tr td:not(:nth-child(1)):not(:nth-child(2)){ background: #333 }

5.更多組合寫法

table tr td:not(:first-child):hover>a{background: #333} ul:not(.clock) li:not(:last-child){ border-bottom: 1px solid #ddd;} ul:not(.clock) li:nth-of-type(4n){ border-color: #ccc;} ul:not(.clock) li:nth-of-type(2n+1){ border-style: dotted;}

對於不用再多寫一行css去取消原本設定的屬性，:not 的確是好幫手，CSS程式碼也會因此簡介許多，請務必使用看看！！！