如何在CSS中正確使用not選擇器

Question

我理解在CSS中使用not（）的基本要旨，但它似乎對我無效。我試圖做類似的事情：

input[type=text][readonly]:not(.class1, .class2) { 
background-color: #DDDDDD; 
color: #1E1E1E; 
} 

但是，這似乎並沒有爲我工作。每當我讀到關於此的任何信息時，它都會有例如input:not(.class1, .class2) {，但標籤和:not()部件之間沒有任何內容。我是否正確地認爲我寫的語法不正確？如果我使用:not()，我不能再定義標籤元素嗎？

Answer 1

你唯一的問題是你在:not()裏只傳遞兩個選擇符，每個語句只能使用一個。

目前擴展參數(foo, bar)不受任何瀏覽器支持。

使用

:not(.class1):not(.class2) 

https://developer.mozilla.org/en-US/docs/Web/CSS/%3Anot

input[type=text][readonly]:not(.class1):not(.class2) { 
 
    background-color: #DDDDDD; 
 
    color: #1E1E1E; 
 
}

<input type=text readonly class="class1"> 
 
<input type=text readonly> 
 
<input type=text readonly class="class2">

Answer 2

:not只接受簡單的選擇，而不是他們的名單。

所以你的選擇應該是這樣的：

input[type=text][readonly]:not(.class1):not(.class2) {...} 

Answer 3

使用它組合方式：

:not(.class1):not(.class2) 

的:not選擇是不是一個函數。它就像其他選擇器中的其他選擇器一樣。

你最後的CSS應該是：

input[type=text][readonly]:not(.class1):not(.class2) { 
    /* Styles */ 
} 

片段

input[type=text][readonly]:not(.class1):not(.class2) { 
 
    background-color: #DDDDDD; 
 
    color: #1E1E1E; 
 
}

<input type=text readonly class="class1"> 
 
<input type=text readonly class="class2"> 
 
<input type=text readonly>