如何使用：not（）pseudo-class選擇與某個選擇器不匹配的元素？-css教學-PHP中文網

首頁

web前端

css教學

如何使用：not（）pseudo-class選擇與某個選擇器不匹配的元素？

James Robert Taylor

Mar 27, 2025 pm 06:12 PM

CSS中的:not()偽級是一種功能強大的工具，用於選擇與指定選擇器不匹配的元素。使用:not()語法很簡單：： :not(selector) 。您可以使用它：

基本用法：要選擇所有不屬於special班級的段落，您將寫下：

 <code class="css">p:not(.special) { /* Styles for paragraphs that do not have the class 'special' */ }</code>

登入後複製

複雜的選擇器：您可以在:not()內使用更多複雜的選擇器。例如，要選擇不是section的所有div元素，您將使用：
```
 <code class="css">div:not(> section) { /* Styles for div elements that are not direct children of a section */ }</code>
```
登入後複製
多個選擇器：您還可以在以下位置中使用多個選擇器:not()通過逗號將它們分開。例如，選擇所有既不是第一個也是最後一個孩子的li元素，您將寫下：
```
 <code class="css">li:not(:first-child):not(:last-child) { /* Styles for li elements that are neither the first nor the last child */ }</code>
```
登入後複製

通過使用:not() ，您可以創建更靈活，更有效的選擇器，從而使您可以基於它們的元素來定位元素，而不是它們的元素。

:not()偽級是通用的，可以在各種情況下應用。以下是一些常見用例：

不包括特定元素：您可能需要將樣式應用於某個類型的所有元素，除了一些特定的元素。例如，為了設置除課堂submit的所有按鈕以外的所有按鈕，您可以使用：
```
 <code class="css">button:not(.submit) { /* Styles for all buttons except those with class 'submit' */ }</code>
```
登入後複製
響應式設計：在響應式設計中，您可能需要根據屏幕尺寸應用不同的樣式。例如，要將所有元素aside在移動設備上，除了具有important元素外，您可以使用：
```
 <code class="css">@media (max-width: 600px) { aside:not(.important) { display: none; } }</code>
```
登入後複製
樣式形式元素：樣式表單時，您可能需要將不同的樣式應用於不同類型的輸入字段。例如，要設計除了類型submit所有輸入字段，您可以使用：
```
 <code class="css">input:not([type="submit"]) { /* Styles for all input fields except submit buttons */ }</code>
```
登入後複製
簡化選擇器：the :not()偽級可以幫助簡化複雜的選擇器。例如，您可以使用:not()來更有效地實現相同的結果，而不是編寫多個選擇器來排除某些元素。

是的，可以將:not()偽級與其他選擇器結合使用，以創建更複雜和更具體的規則。您可以將其結合起來：

與類選擇器結合：您可以組合:not()與類選擇器一起使用特定類排除元素。例如：

 <code class="css">div:not(.highlight) { /* Styles for all div elements that do not have the class 'highlight' */ }</code>

登入後複製

與偽級結合：您也可以結合:not()與其他偽級。例如，選擇所有不是第一個孩子並且沒有active li元素，您可以使用：
```
 <code class="css">li:not(:first-child):not(.active) { /* Styles for li elements that are not the first child and do not have the class 'active' */ }</code>
```
登入後複製
與屬性選擇器結合：您可以使用:not()使用屬性選擇器來根據其屬性排除元素。例如，要選擇所有沒有disabled屬性的input元素，您可以使用：
```
 <code class="css">input:not([disabled]) { /* Styles for all input elements that are not disabled */ }</code>
```
登入後複製
嵌套：NOT（） ：您甚至可以在另一個： :not()選擇器中嵌套： :not()來創建更複雜的排除。例如，選擇所有不是一個section的div元素並且沒有special班級的班級，您可以使用：
```
 <code class="css">div:not(> section):not(.special) { /* Styles for div elements that are not direct children of a section and do not have the class 'special' */ }</code>
```
登入後複製

通過組合:not()與其他選擇器，您可以創建高度特定和高效的CSS規則。

雖然:not()偽級得到了廣泛的支持，但需要注意的是一些局限性和瀏覽器兼容性問題：

選擇器複雜度：the :not() pseudo-class只能接受簡單的選擇器，而不是選擇器列表。這意味著您不能在以下位置使用逗號分隔的選擇列表:not() 。例如， :not(.class1, .class2)無效。相反，您需要使用多個:not()選擇器，例如:not(.class1):not(.class2) 。
瀏覽器支持：the :not()偽級都得到了所有現代瀏覽器的支持，包括Chrome，Firefox，Safari和Edge。但是，舊版本的Internet Explorer（IE8及以下）不支持它。如果您需要支持較舊的瀏覽器，則可能需要使用替代方法或多填充。
性能：使用多重:not()選擇器可能會影響性能，尤其是在復雜的CSS規則中。在不同的瀏覽器和設備中測試您的CSS很重要，以確保性能是可以接受的。
嵌套限制：雖然您可以嵌套:not()選擇器，但這樣做可以使您的CSS更難讀取和維護。通常，最好使選擇器盡可能簡單，以提高可讀性和性能。
特異性：the :not()偽級不會添加選擇器的特異性。這意味著，如果您有衝突的規則，那麼具有更高特異性的規則仍將優先考慮:not() 。