1. :is
解释：:is() CSS伪类函数将选择器列表作为参数，并选择该列表中任意一个选择器可以选择的元素。
例如
- 对于多个不同父容器的同个子元素的一些共性样式设置,传统写法如下
header p:hover,
main p:hover,
footer p:hover {
color: red;
cursor: pointer;
}
有了:is之后可以这么写
:is(header, main, footer) p:hover {
color: red;
cursor: pointer;
}
2. :where 伪类选择器
解释：与:is类似，:where 同样是将选择器列表作为其参数，并选择可以由该列表中的选择器之一选择的任何元素。与:is的区别就是 :where优先级总为0
例如
- html代码如下
<div>
<p>where & is test</p>
</div>
- css代码如下
:is(div) p {
color: red;
}
:where(div) p {
color: green;
}
正常按我们的理解而言，:is(div) p 和 :where(div) p 都可以转化为 div p，由于 :where(div) p 后定义，所以文字的颜色，应该是 green 绿色，但是，实际的颜色表现为 color: red 红色：
这是因为，:where() 和 :is() 的不同之处在于，:where() 的优先级总是为 0 ，但是 :is() 的优先级是由它的选择器列表中优先级最高的选择器决定的。
3.:not 伪类选择器
解释：:not 伪类选择器用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中，它也被称为反选伪类（negation pseudo-class）。
例如：
- html如下
<div class="a">div.a</div>
<div class="b">div.b</div>
<div class="c">div.c</div>
<div class="d">div.d</div>
div:not(.b) {
color: red;
}
div:not(.b) 它可以选择除了 class 为 .b 元素之外的所有 div 元素：
tips:继承性属性可能会失效 注意！！！！
4.:has 伪类选择器
解释：:has 伪类接受一个选择器组作为参数，该参数相对于该元素的 :scope 至少匹配一个元素。
例如
div>
<p>div -- p</p>
</div>
<div>
<p class="g-test-has">div -- p.has</p>
</div>
<div>
<p>div -- p</p>
</div>
div:has(.g-test-has) {
border: 1px solid #000;
}
我们通过 div:has(.g-test-has) 选择器，意思是，选择 div 下存在 class 为 .g-test-has 的 div 元素。
- :has() 父选择器 -- 嵌套结构的父元素选择
<div>
<span>div span</span>
</div>
<div>
<ul>
<li>
<h2><span>div ul li h2 span</span></h2>
</li>
</ul>
</div>
<div>
<h2><span>div h2 span</span></h2>
</div>
div:has(>h2>span) {
margin-left: 24px;
border: 1px solid #000;
}
这里，要求准确选择 div 下直接子元素是 h2，且 h2 下直接子元素有 span 的 div 元素。注意，选择的最上层使用 :has() 的父元素 div。
- :has() 父选择器 -- 同级结构的兄元素选择
<div class="has-test">div + p</div>
<p>p</p>
<div class="has-test">div + h1</div>
<h1>h1</h1>
<div class="has-test">div + h2</div>
<h2>h2</h2>
<div class="has-test">div + ul</div>
<ul>ul</ul>
我们想找到兄弟层级关系中，后面接了h2元素的 .has-test 元素，可以这样写：
.has-test:has(+ h2) {
margin-left: 24px;
border: 1px solid #000;
}
