:not()的含義及其使用

這篇文章將為大家詳細講解有關:not()的含義及其使用，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。

:not()是CSS的一個否定偽類選擇器。它是一個函數式偽類選擇器，它可以將一個簡單選擇器（如下所示）作為參數，然后匹配一個或多個不由參數表示的元素。

能作為:not()參數的可以是以下任何一種的簡單選擇器：

1、標簽選擇器（例如p，span等）

2、類選擇（例如.element，.sidebar等）

3、ID選擇器（例如#header）

4、偽類選擇器（例如:first-child，:last-of-type）

5、屬性選擇器（例如[type="checkbox"]）

6、通用選擇器（*）

但是，傳遞給:not()的參數不能是偽元素選擇器（例如::before和::after等）或另一個否定偽類選擇器。

因此，以下是無效 :not()值：

/* 無效 */
p:not(:not(.same)) {}

p:not(:not(:last-child)) {}

:not(::first-letter) {}

a:not(::after) {}

從上面的示例可以看出，:not()不能被嵌套，例:not(:not(..))。它還不能被嵌套在:matches()偽類中，例：selector（:matches(:not(..))）。

如前所述，:not()選擇器將匹配其參數中未由選擇器表示的元素。所以，這條css語句：：

li:not(.new) {    
  /* 所有樣式列表項，除了具有新類的項之外*/
}

將選擇除具有.new類名稱的列表項之外的所有列表項。

:not()選擇是可鏈接更多的:not()選擇。例如，以下內容將匹配article除ID之外的所有s #featured，然后將過濾掉具有類名的文章.tutorial：

article:not(#featured):not(.tutorial) {    
     /* 格式化文章 */
}

:not()還可以與其他偽類和偽元素鏈接。例如，以下將.old使用::after偽元素添加“new！”單詞以列出沒有類名的項目：

li ：not（.old）:: after {     
   content：“New！” ;    
   color：deepPink;
}

說明：

:not()偽類選擇允許寫入無用的選擇。例如:not(*)，它根本不代表任何元素將永遠不會應用任何樣式。

關于:not()的含義及其使用就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。