CSS3新特性选择器

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;
}

tips::has() 兼容性不太好

5. within

解释：:within 伪类选择器用来匹配一个元素的后代元素，该元素必须是该元素的祖先元素的最后一个子元素。

例如

<div class="within-test">
    <p>within-test</p>
    <p>within-test</p>
    <p>within-test</p>
</div>

.within-test:within {
    border: 1px solid #000;
}

这里，我们通过 .within-test:within 选择器，意思是，选择 .within-test 元素的最后一个子元素，即最后一个 p 元素。

6. focus-within

解释：:focus-within 伪类选择器用来匹配一个元素的后代元素，该元素必须是该元素的祖先元素的最后一个子元素，并且该元素或者该元素的后代元素获得了焦点。

例如

<div class="focus-within-test">
    <p>focus-within-test</p>
    <p>focus-within-test</p>
    <p>focus-within-test</p>
</div>

.focus-within-test:focus-within {
    border: 1px solid #000;
}

7. ::fist-letter

解释：::first-letter 伪元素选择器用来匹配一个元素的第一个字母，该元素必须是块级元素或者行内块元素。

例如

<p class="first-letter-test">first-letter-test</p>

.first-letter-test::first-letter {
    font-size: 24px;
    color: red;
}

8. ::selection

解释：::selection 伪元素选择器用来匹配一个元素的选中文本，该元素必须是块级元素或者行内块元素。

例如

<p class="selection-test">selection-test</p>

.selection-test::selection {
    background-color: red;
    color: #fff;
}

更多例子可以参考：https://zhuanlan.zhihu.com/p/516155516