本文介绍一下Css伪类:is和:not，并解释一下is、not、matches、any之前的关系
:not
The :not() CSS pseudo-class represents elements that do not match a list of selectors. Since it prevents specific items from being selected, it is known as the negation pseudo-class.
以上是MDN对not的解释
单从名字上我们应该能对它有大概的认知，非选择，排除括号内的其它元素
最简单的例子，用CSS将div内，在不改变html的前提下，除了P标签，其它的字体颜色变成蓝色，
我是蓝色
我是黑色
我是蓝色
我是蓝色
我是蓝色
我是蓝色
我是蓝色
之前的做法
divspan,divh2,divh3,divh4,{
color:blue;
}
not写法
div:not(p){
color:blue;
}
从上面的例子可以明显体会到not伪类选择器的作用
下面升级一下，问：将div内除了span和p，其它字体颜色变蓝色
div:not(p):not(span){
color:blue;
}
还有更为简洁的方法，如下，但是目前兼容不太好，不建议使用
div:not(p,span){
color:blue;
}
兼容
除IE8，目前所有主流浏览器都支持，可以放心使用
:is
The :is() CSS pseudo-class function takes a selector list as its argument, and selects any element that can be selected by one of the selectors in that list. This is useful for writing large selectors in a more compact form.
以上是MDN的解释
在说is前，需要先了解一下matches
matches跟is是什么关系？
matches是is的前世，但是本质上确实一个东西，用法完全一样
matches这个单词意思跟它的作用非常匹配，但是它跟not作用恰好相反，作为not的对立面，matches这个次看起来确实格格不入，而且单词不够简洁，所以它被改名了，这里还有一个issue /w3c/csswg-drafts/issues/3258，也就是它改名的源头
好了，现在知道matches和is其实是一个东西，那么is的用法是怎样的呢？
举例：将header和main下的p标签，在鼠标hover时文字变蓝色
鼠标放上去变蓝色
鼠标放上去变蓝色
正常字体
鼠标放上去变蓝色
鼠标放上去变蓝色
正常字体
正常字体
正常字体
之前的做法
headerulp:hover,mainulp:hover{
color:blue;
}
is写法
:is(header,main)ulp:hover{
color:blue;
}
从上面的例子大概能看出is的左右，但是并没有完全体现出is的强大之处,但是当选择的内容变多之后，特别是那种层级较多的，会发现is的写法有多简洁，拿MDN的一个例子看下
之前的写法
/*Level0*/
h1{
font-size:30px;
}
/*Level1*/
sectionh1,articleh1,asideh1,navh1{
font-size:25px;
}
/*Level2*/
sectionsectionh1,sectionarticleh1,sectionasideh1,sectionnavh1,
articlesectionh1,articlearticleh1,articleasideh1,articlenavh1,
asidesectionh1,asidearticleh1,asideasideh1,asidenavh1,
navsectionh1,navarticleh1,navasideh1,navnavh1{
font-size:20px;
}
is写法
/*Level0*/
h1{
font-size:30px;
}
/*Level1*/
:is(section,article,aside,nav)h1{
font-size:25px;
}
/*Level2*/
:is(section,article,aside,nav)
:is(section,article,aside,nav)h1{
font-size:20px;
}
可以看出，随着嵌套层级的增加，is的优势越来越明显
说完了is，那就必须认识一下any,前面说到is是matches的替代者，
any跟is又是什么关系呢？
是的，is也是any的替代品，它解决了any的一些弊端，比如浏览器前缀、选择性能等
any作用跟is完全一样，唯一不同的是它需要加浏览器前缀，用法如下
:-moz-any(.b,.c){
}
:-webkit-any(.b,.c){
}
结论
通过上面的介绍大概讲述了css伪类is,not,matches,any它们三者的关系
is+not组合是大势所趋
