CSS伪类：否定匹配 :not

马黑黑 · 发表于 2022-10-29 16:56

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2022-10-29 17:01 编辑

CSS伪类中，:not 用于否定匹配，其行为很像反向选择，故又称反向匹配。

例如，我们要匹配不是 p 的所有元素：:not(p)

再如，我们要选择所有 class（类）名不是 .black 的标签：:not(.black)

:not(p) 表示“不是p标签”，那么，下面标蓝色的的标签都会匹配，因为它们都不是 p 标签——

<h1>论时势造英雄</h1>
<span>欢乐水吧</span>
<p>段落N……</p>
<div>奋斗者正青春</div>
<button id="btnplay">play</button>

:not(.black) 则表示 class 名不等于 .black 的所有标签——

<div id="papa">
      <h2 class="pink">粉色</h2>
      <p class="blue">蓝色</p>
      <p class="green">绿色</p>
      <p class="red"><span class="green">粉色</span>红色</p>
</div>

上面HTML代码中，papa 父div之下有几个子元素，它们都带有 class="..." 的标识，就是说都有类名。如果我们有把它们全部找出来，我们用一个代码中不存在的类名去匹配它们就可以了，:not(.black)。

顺便提一下，肯定匹配，即 :is(...) ，同样支持类名、id 名参数。

反向匹配，自然也要给出属性设置，比方讲，上面的最后一组HTML代码，它们事先在CSS中设定了多个类选择器，令HTML代码中使用了相应类名的标签拥有一定的属性，如文本颜色，现在呢，我们想取消这些前景色设置、统统使用黑色，我们通过否定匹配 :not(...) 来加以实现：

:not(.black) { color: black; }

上面这句 css 语句，只要在文档的CSS代码中出现，权重不被设定的情况下，不论放在事先设定的设置之前还是之后，都匹配，有效。就是说，HTML代码中，只要带 class="..." 的标签，如果 class 等号后面的值不是 black ，则前景色设定为黑色，不论之前设定了什么颜色。

上面，对没有  class 类名的标签，则无能为力，因为 :not(.black) 针对的是 class 而做的匹配。若要针对没有 class="..." 的标签也要匹配，我们需要改造一下我们的匹配规则：

:not(.black), #papa :not(i) { color: black; }

新修改的规则，我们增加了 #papa :not(i) 匹配式子，意思是，#papa父盒子之下的所有子元素中，只要不是 i 标签的，也都统统设置文本色为黑色。注意写法，#papa 和 :not(i) 之间有一个空格，不能连在一起写！空格表示前后的隶属关系，因为有了空格，:not(i) 指的才是 #papa 下面不是 i 标签的标签。同样，如果 :not(.black) 也仅针对 papa 父盒子下面的子元素、不能影响其他的DOM区域，则上面的语句还需要改造：

#papa :not(.black), #papa :not(i) { color: black; }

同样需要注意 #papa 和 :not(...) 之间必须有一个空格！