:not() 選擇器用於一些特殊的功能的呈現上，我舉一個我使用的例子：

當你的滑鼠hover到這些標籤的時候，會想第二個標籤一樣改變顏色。

而當你點選第一個的時候標籤“Asset Sector”，然後再把滑鼠hover上去的時候就不想要這個特效了。

這個改怎麼實現吶？

很簡單，使用 &:not() 選擇器就可以很容易解決這個問題了。

在W3CSchool 上的定義：

                  :not(selector)選擇器匹配非指定元素/選擇器的每個元素。

看我做什麼操作來達到上面的效果。

原始的程式碼：

.pr-pos-box_tab {
  display: inline-block;
  margin-right: 5px;
  padding: 10px 12px 8px;
  color: @pr-dark-grey-2;
  font-size: 13px;
  font-weight: bold;
  background-color: @pr-middle-grey;  
  cursor: pointer;
  &:last-child{
    margin-right: 0;
  }
  &:hover{
    background-color: @pr-light-grey-7;
  }
}
 

改變後的程式碼：

.pr-pos-box_tab {
  display: inline-block;
  margin-right: 5px;
  padding: 10px 12px 8px;
  color: @pr-dark-grey-2;
  font-size: 13px;
  font-weight: bold;
  background-color: @pr-middle-grey;  
  cursor: pointer;
  &:last-child{
    margin-right: 0;
  }
}


.pr-pos-box_tab:not(.pr-pos-box_tab--selected) {
  &:hover{
    background-color: @pr-light-grey-7;
  }
}
 

看出不同了麼？

對~用了not(.pr-pos-box_tab--selected)來使hover的時候不作用到pr-pos-box_tab--selected標籤上

改變後的效果圖：

是不是棒棒噠☻~