css中:not()選擇器的使用方法

這篇文章主要介紹css中:not()選擇器的使用方法，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

css的基本語法是什么

css的基本語法是：1、css規則由選擇器和一條或多條聲明兩個部分構成；2、選擇器通常是需要改變樣式的HTML元素；3、每條聲明由一個屬性和一個值組成；4、屬性和屬性值被冒號分隔開。

在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中:not()選擇器的使用方法”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！