CSS伪类：否定匹配 :not
本帖最后由 马黑黑 于 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(...) 之间必须有一个空格！
这个覆盖面挺大的，非我族类，全部打尽{:4_173:} 红影 发表于 2022-10-29 19:07
这个覆盖面挺大的，非我族类，全部打尽
是这个意思
马黑黑 发表于 2022-10-29 19:11
是这个意思
这些伪类的功能分得还挺细的。 红影 发表于 2022-10-29 20:12
这些伪类的功能分得还挺细的。
是的 加分就走{:4_193:} 樵歌 发表于 2022-10-29 20:59
加分就走
放心放心，没人敢否定你
页:
[1]