伪类选择器:is()和:where()的用法，可以解决代码冗余

1、常规选择器，并集选择器

当html部分如图所示：

    <div id="d1">
        <h2>nihao 121231</h2>
    </div>
    <div id="d2">
        <h2>nihao 121231</h2>
    </div>
    <div id="d3">
        <h2>nihao 121231</h2>
    </div>
    <div id="d4">
        <h2>nihao 121231</h2>
    </div>
    <div id="d5">
        <h2>nihao 121231</h2>
    </div>

需求：将前4个div的h2标签颜色改变，使用并集选择器实现时为：

#d1 h2,
#d2 h2,
#d3 h2,
#d4 h2{
   color: blue;
}

但是此时会显得代码冗余和占行过多，那么我们可以使用伪类选择器来实现。

2、伪类选择器:is()

将上面需求使用伪类选择器:is()来实现，在()里面加入选择器，这样也能实现

:is(#d1, #d2, #d3, #d4) h2{
            color: pink;
        }

3、伪类选择器:where()

当然使用:where()也能实现以上功能

:where(#d1, #d2, #d3, #d4) h2{
            color: pink;
        }

当然除了这种用法，两个伪类选择器还有更多的优点

当使用并集选择器时，写错代码，整个样式都不会执行，如图是写错一个代码之后的错误示范,::after写错变成了::aftera，整个样式不执行。

#d1 h2,
#d2 h2,
#d3 h2::aftera,
#d4 h2 {
   color: blue;
}

但是使用伪类选择器，只会不执行写错的一个选择器，如图此时#d3的代码错误，只有第三个不会改变样式，其他正常执行，:where()同理。

:is(#d1, #d2, #d3::aftera, #d4) h2{
            color: pink;
        }

4、分析

伪类选择器里面可以写逻辑表达式在里面

html部分：

    <div id="d_1" name="d1_div">
        <h2>nihao 121231</h2>
    </div>
    <div id="d2">
        <h2>nihao 121231</h2>
    </div>
    <div id="d_3" name="d3_div">
        <h2>nihao 121231</h2>
    </div>
    <div id="d4">
        <h2>nihao 121231</h2>
    </div>
    <div id="d_5">
        <h2>nihao 121231</h2>
    </div>

 css部分

        :where([id^='d_'][name$='_div']) h2 {
            color: pink;
        }

当然使用这两个选择器效果差不多，区别就在于两个优先级权重不一样，如图颜色会变成pink

        #d1 h2,
        #d2 h2,
        #d3 h2,
        #d4 h2 {
            color: blue;
        }

        :is(#d1, #d2, #d3, #d4) h2 {
            color: pink;
        }

        :where(#d1, #d2, #d3, #d4) h2 {
            color: red;
        }

 分析：第一个样式是id选择器+标签选择器，第二个:is()伪类括号内整体是id选择器，再加上一个标签选择器，两者权重一样，主要是css的层叠导致颜色变为pink，两者调换上下位置之后，颜色变为blue。但是:where()伪类优先级是0，所以它的整体优先级只有标签选择器。