:not()的含義及其使用

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

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

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

1、標(biāo)簽選擇器（例如p，span等）

2、類(lèi)選擇（例如.element，.sidebar等）

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

4、偽類(lèi)選擇器（例如:first-child，:last-of-type）

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

6、通用選擇器（*）

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

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

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

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

:not(::first-letter) {}

a:not(::after) {}

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

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

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

將選擇除具有.new類(lèi)名稱的列表項(xiàng)之外的所有列表項(xiàng)。

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

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

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

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

說(shuō)明：

:not()偽類(lèi)選擇允許寫(xiě)入無(wú)用的選擇。例如:not(*)，它根本不代表任何元素將永遠(yuǎn)不會(huì)應(yīng)用任何樣式。

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