CSSNot選擇器詳解

    p:not(.no-show) {
        color: red;
    }

CSSNot選擇器是CSS3中的一種選擇器，使用:not()來選取不符合條件的元素。例如，對於一堆p元素，我們想要選取除了某個特定class的p元素，就可以使用:not()。

CSSNot選擇器的語法格式為：:not(selector)

其中選擇器selector可以是任意的CSS選擇器，用於指定不選取的標籤，當然也可以是花括號形式的樣式聲明。

    p:not(.no-show) {
        color: red;
    }
    .no-show {
        color: blue;
    }

有時候我們的CSS樣式很複雜，多個class，多個id的組合起來產生很多錯誤的效果，這時候我們就可以使用CSSNot選擇器來選擇排除其中的一些元素進行樣式重置，從而達到解決樣式衝突的目的。

    *:not(body) {
        margin: 0;
        padding: 0;
    }

有時候我們需要對所有元素進行樣式定義，但是又不想影響body元素，這時候就可以使用樣式聲明的縮寫形式：*。使用CSSNot選擇器來選取全部的子元素，並排除body元素，從而簡化代碼。

    p:not(:first-child) {
        margin-top: 10px;
    }

有時候我們需要對某個元素的特殊樣式進行定義，例如上例中，對於除了第一個p元素，我們需要設置margin-top: 10px。這時候就可以使用CSSNot選擇器來選取除了第一個p元素進行特殊樣式定義。

CSSNot選擇器是非常有用的CSS選擇器，但是有些注意事項需要我們避免在使用過程中出現錯誤。下面列舉一些CSSNot選擇器無效選取的情況：

    p:not(:before) {
        color: red;
    }

對於偽元素:before/:after，CSSNot選擇器是無效的，因為偽元素對應於某個元素的內容或標籤內部。偽元素不能被作為獨立元素選中或組合。因此，p:not(:before)是無效的選擇器。

    p:not(.one, .two) {
        color: red;
    }

在使用CSSNot選擇器的時候，選擇器只能選取一個元素，多個元素則會無效。例如，p:not(.one, .two)是無效的選擇器，正確的寫法應該是：p:not(.one):not(.two)。

    *:not(button) p {
        color: red;
    }

在使用CSSNot選擇器的時候，不建議與通用選擇器*和後代選擇器一起使用，例如上例中，我們想選取所有p元素並排除button元素，但是這樣會選取所有非button的元素，包括body、html等等。這時候我們應該使用:not(button) p，而不是使用 *:not(button) p。

原創文章，作者：ZQVT，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/137532.html