CSS伪类,_is,_not和_where的介绍和使用

<div>
 <h1><b>1</b></h1>
 <h2><b>2</b></h2>
 <h3><b>3</b></h3>
 <h4><b>4</b></h4>
 <h5><p>5</p></h5>
</div>

上面代码中我要改变b标签里面的样式，但是其他地方也有b标签，不能使用标签选择器，你会怎么做？
最蠢的就是全部加相同的class，但是那样既不好看又冗余

h1 > b, h2 > b, h3 > b, h4 > b{
  color: blue;
}

这样的写法其实也还行，但是可以有更简便的方法，那就是:is伪类选择器(matches是is的前世，但是本质上确实一个东西，用法完全一样)

:is()

:is() CSS 伪类 函数将选择器列表作为参数，并选择该列表中任意一个选择器可以选择的元素。这对于以更紧凑的形式编写大型选择器非常有用。
使用:is()后：

:is(h1,h2,h3,h4,h5,h6) > b {
  color: blue;
}

不过该伪类有着一定的兼容性，使用前最好先确定你的浏览器是否兼容

:where()

:where() 伪类函数与**:is()**功能相同
:where() 和 :is() 的不同之处在于，:where() 的优先级总是为 0 ，但是 :is() 的优先级是由它的选择器列表中优先级最高的选择器决定的。
也就是说 :where() 不会增加整体选择器的特殊性（即某条css规则特殊性越高，它的样式越优先被采用）。
:where() 伪类及其任何参数都不对选择器的特殊性有所帮助，它的特殊性始终为零。

:not()

CSS否定伪类，:not(X)，是以一个简单的以选择器X为参数的功能性标记函数。它匹配不符合参数选择器X描述的元素。X不能包含另外一个否定选择器。
:not伪类的优先级即为它参数选择器的优先级。:not伪类不像其它伪类，它不会增加选择器的优先级
用法也简单，字面意思

div:not(h5){}

这里要注意:not()的几个注意点
not()伪类括号里面不能多个选择器

div:not(h5,h4){} /* 无效，不支持 */

正确写法应该为:

div:not(h5),:not(h4){}

:not()伪类括号里面不支持选择器级联

:not(a.disabled) {} /* 无效，不支持 */

正确写法应该为：

:not(a):not(.disabled) {}

这里只是简单介绍了这三个伪类元素的用法，但是其实有很多注意点，尤其:not()，有着容易搞混的否定逻辑关系。