: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视频教程
单从名字上我们应该能对它有大概的认知，非选择，排除括号内的其它元素
最简单的例子，用CSS将div内，在不改变html的前提下，除了P标签，其它的字体颜色变成蓝色，
<div> <span>我是蓝色</span> <p>我是黑色</p> <h1>我是蓝色</h2> <h2>我是蓝色</h2> <h3>我是蓝色</h3> <h4>我是蓝色</h4> <h5>我是蓝色</h5></div>
之前的做法
div span,div h2,div h3, div h4,{ 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 https://github.com/w3c/csswg-drafts/issues/3258，也就是它改名的源头
好了，现在知道matches和is其实是一个东西，那么is的用法是怎样的呢？
举例：将header和main下的p标签，在鼠标hover时文字变蓝色
<header> <ul> <li><p>鼠标放上去变蓝色</p></li> <li><p>鼠标放上去变蓝色</p></li> </ul> <p>正常字体</p></header><main> <ul> <li><p>鼠标放上去变蓝色</p></li> <li><p>鼠标放上去变蓝色</p></li> <p>正常字体</p> </ul></main><footer> <ul> <li><p>正常字体</p></li> <li><p>正常字体</p></li> </ul></footer>
