伪原创没用(CSS:伪类常见错误认知(not(X)())

　　伪原创没用(CSS:伪类常见错误认知(not(X)())

　　概述

　　CSS 否定伪类 :not(X) 是一个简单的函数式标记函数，它将选择器 X 作为参数。它匹配与参数选择器 X 的描述不匹配的元素。X 不能收录另一个否定选择器。

　　:not 伪类的优先级是其参数选择器的优先级。:not 伪类与其他伪类不同，不会增加选择器的优先级。

　　一、优先级

　　关于 CSS :not 伪类的常见误解之一是不知道它的优先级。

　　如果你对所有 CSS 伪类的优先级（也称为选择器权重）进行分类，你会发现总共只有两个级别，级别 0 和级别 10。

　　0级表示无优先级；

　　级别 1 是标签选择器；

　　10级是类选择器，属性选择器；

　　100 级是 ID 选择器。

　　伪类，伪类，既然有“类”这个词，它的优先级自然和类选择器是一样的。

　　但是有一个特殊的，就是逻辑伪类的优先级为0。例如：:not()、:is()、:where()等。

　　逻辑伪类的整个选择器语句的优先级由括号中的内容决定。不同的逻辑伪类有不同的规则。其中，not()伪类本身没有优先级，最终的优先级由括号中的选择器决定。决定。

　　例如：

　　:not(.disabled) {} /* 优先级等同于.disabled选择器 */

:not(a) {} /* 优先级等同于a选择器 */

　　不支持复杂的选择器

　　:not() 逻辑伪类很早就诞生了，早在 IE9 浏览器中就得到了支持。与新的逻辑选择器不同，:not() 伪类括号不支持复杂的选择器（虽然新规范已经支持，目前还没有浏览器跟进）。

　　例如，:not() 伪类括号不能收录多个选择器：

　　:not(.disabled, .read-only) {} /* 无效，不支持 */

　　正确的写法是：

　　:not(.disabled), :not(.read-only) {}

　　例如，在 :not() 伪类括号内不支持选择器级联：

　　:not(a.disabled) {} /* 无效，不支持 */

　　正确的写法是：

　　:not(a):not(.disabled) {}

　　容易混淆的负逻辑关系

　　这是本文的重点。

　　1. 连续否定的逻辑错误

　　比如我们要匹配一个既不收录.disabled类名也不收录.read-only类名的元素，我们的选择器应该怎么写，很多人会使用如下CSS代码：

　　input:not(.disabled),

input:not(.read-only) {}

　　乍一看似乎没有问题，但实际上上面的写法是大错特错。

　　逗号分隔的选择器表示“或”关系，而不是“与”关系。因此，input:not(.disabled), input:not(.read-only) 表示：不收录 .disabled 类名的元素，或不收录 .read-only 类名的元素。

　　最终结果是 .disabled 类名和 .read-only 类名元素都将匹配。

　　例如：

　　因为虽然不会匹配input:not(.disabled)，但是会匹配input:not(.read-only)，导致匹配效果不理想。

　　在这里，正确的写法应该是：

　　/* 正确的书写 */

input:not(.disabled):not(.read-only) {}

　　2. 全局负逻辑错误

　　例如，我们想要除了

　　标签下

　　元素的margin值为0，我们应该怎么写代码。

　　很多人会这样写：

　　:not(article) p {

margin: 0;

}

　　看似没有问题，其实问题很严重。:not(article) p 的实际语义是，如果

　　如果元素的祖先元素的标签名不是article，则margin值为0。

　　这些包括这样的场景：

<p>margin此时也是0！

<p>此时，虽然

　　元素在元素内部，但是因为也在元素内部，所以匹配了 :not(article) p 选择器，导致样式表现出乎意料。

　　正确的写法应该是：

　　p {

margin: 0;

}

article p {

margin: 1em 0;

}

　　嗯？不能使用 :not 伪类实现？是的，在这种情况下，:not 伪类是无法解决的。

　　除非你强制分层元素，即

　　该元素是相邻的子元素元素。这时候我们可以使用下面的CSS来满足我们的需求，但是限制非常大。推荐使用传统的重置策略：

　　:not(article) > p {

margin: 0;

}

　　结束语

　　:not 伪类是目前唯一可以*敏*感*词*安全使用的逻辑伪类。它非常有用并且具有突出的优点。你可以更多地使用它。

　　不过，也有一些地方会让人踩坑。本文将介绍这些您可能会误解或使用不正确的地方。至于优点，不是本文的重点。以后有机会详细介绍。，好用，大家应该多用。