css :not()選擇器怎麼用

在css中，not選擇器用來符合非指定元素/選擇器的每個元素，語法格式「:not(selector)」。 not選擇器可以為每個非指定元素設定樣式，例「:not(p){background:red;」就是為每個非p元素的元素設定背景顏色。

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

: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標籤上

改變後的效果圖：

（學習影片分享：css影片教學）

以上是css :not()選擇器怎麼用的詳細內容。更多資訊請關注PHP中文網其他相關文章！