CSS选择器中的:has()和:not()伪类

前言: 本文记录一下CSS3中逻辑选择器中的has和not, has相当于根据子代条件来选择父代, not类似过滤条件. 使用前先检查代码运行的浏览器环境是否符合如下截图条件

not

对当前节点的过滤筛选

<code>&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;css&lt;/title&gt;
    &lt;style&gt;
      div.parent:not(.not-parent) {
        border: 1px red solid;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div class=&quot;parent not-parent&quot;&gt;0000&lt;/div&gt;
    &lt;div class=&quot;parent&quot;&gt;
      &lt;div&gt;1111&lt;/div&gt;
      &lt;div&gt;
        &lt;div class=&quot;active&quot;&gt;2222&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;parent&quot;&gt;
      &lt;div&gt;3333&lt;/div&gt;
      &lt;div&gt;4444&lt;/div&gt;
    &lt;/div&gt;
    &lt;p&gt;&lt;/p&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code>

has

has选择器: 根据子是否符合条件来选择父级

设置子代中有active类的parent类名div的样式

<code>&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;css&lt;/title&gt;
    &lt;style&gt;
      div.parent:has(.active) {
        border: 1px red solid;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div class=&quot;parent&quot;&gt;
      &lt;div&gt;1111&lt;/div&gt;
      &lt;div&gt;
        &lt;div class=&quot;active&quot;&gt;2222&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;parent&quot;&gt;
      &lt;div&gt;3333&lt;/div&gt;
      &lt;div&gt;4444&lt;/div&gt;
    &lt;/div&gt;
    &lt;p&gt;&lt;/p&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code>

如果将上面css改为, 边框则消失

<code>div.parent:has(&gt; .active) {
  border: 1px red solid;
}</code>

还可以表示兄弟跟随关系

<code>div.parent:has(+ p) {
  border: 1px red solid;
}</code>

和not搭配使用, 如下表示不包含active后代的div.parent的标签

<code>div.parent:not(:has(.active)) {
  border: 1px red solid;
}</code>

上述not和has位置互换表示的意思不一样

<code>div.parent:has(:not(.active)) {
  border: 1px red solid;
}</code>

和表单一些元素搭配使用

<code>&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;css&lt;/title&gt;
    &lt;style&gt;
      div:has(input:focus) {
        border: 1px red solid;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div&gt;
      &lt;input type=&quot;text&quot; value=&quot;111&quot; /&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;input type=&quot;text&quot; value=&quot;222&quot; /&gt;
    &lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code>

一些常规使用CSS选择器可以参考另一篇文章: CSS/CSS3选择器总结 | 尼采般地抒情