CSSNot选择器详解

ZQVT • 2024-10-04 00:17 • 编程

    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/n/137532.html