css逻辑选择器（伪类选择器起到一定的逻辑判断）

css逻辑选择器（伪类选择器起到一定的逻辑判断）

1.:has

:has() CSS 伪类代表一个元素，其给定的选择器参数至少匹配一个元素。某种意义上知道子元素可设置父元素的样式

:has() 伪类使用相对选择器列表作为参数

语法格式 :has( <相对选择器列表> )

<div>
    <div class="div1">
        <div>
            <span>123</span>
        </div>
    </div>
    <div class="div2">
        <div>
            <text class="test">456</text>
        </div>
    </div>
</div>
.div1{
    height: 100px;
    width: 100px;
    background-color: salmon;
  }
  .div2{
    height: 100px;
    width: 100px;
    background-color: rebeccapurple;
  }

1.1 直接用标签

匹配直接包含的

标签，设置样式

  div:has(span){
    height: 50px;
    width: 50px;
    background-color: aqua;
  }

1.2使用class选择器

只要是包含关系，设置样式

div:has(.test){
    height: 50px;
    width: 50px;
    background-color: sandybrown;
  }

5830026.png)]

2.:is

与:any类似将选择器列表作为参数，并选择该列表中任意一个选择器可以选择的元素。

语法格式 :is( <相对选择器列表> )

/* 选择 .div1 , .div2r 里的任意一个悬浮状态的段落 (p 标签) */
:is(.div1 , .div2) p:hover {
  color: red;
  cursor: pointer;
}

/* 以上内容相当于以下内容 */
.div1  p:hover,
.div2 p:hover {
  color: red;
  cursor: pointer;
}

3.:not

:not() 用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中，它也被称为反选伪类

【注】选择器中不得包含另一个否定选择器或伪元素。

语法格式 :not( <相对选择器列表> )

/* 选择所有不是段落（p）的元素 */
:not(p) {
  color: blue;
}

4.:where

受选择器列表作为它的参数，会选择所有能被该选择器列表中任何一条规则选中的元素。

实现效果和:is一样，区别在于优先级问题:where() 的优先级总是为 0 ，但是 :is() 的优先级是由它的选择器列表中优先级最高的选择器决定的。

语法格式 :where( <相对选择器列表> )