css伪类选择器:is :not的介绍

这篇文章主要介绍“css伪类选择器:is :not的介绍”，在日常操作中，相信很多人在css伪类选择器:is :not的介绍问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”css伪类选择器:is :not的介绍”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

单从名字上我们应该能对它有大概的认知，非选择，排除括号内的其它元素

最简单的例子，用CSS将div内，在不改变html的前提下，除了P标签，其它的字体颜色变成蓝色，

<div>    <span>我是蓝色</span>    <p>我是黑色</p>    <h2>我是蓝色</h3>    <h3>我是蓝色</h3>    <h4>我是蓝色</h4>    <h5>我是蓝色</h5>    <h6>我是蓝色</h6></div>

之前的做法

div span,div h3,div h4, div h5,{  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>

之前的做法

header ul p:hover,main ul p:hover{  color: blue;}

is写法

:is(header, main) ul p:hover{  color: blue;}

从上面的例子大概能看出is的左右，但是并没有完全体现出is的强大之处,但是当选择的内容变多之后，特别是那种层级较多的，会发现is的写法有多简洁，拿MDN的一个例子看下

之前的写法

/* Level 0 */h2 {  font-size: 30px;}/* Level 1 */section h2, article h2, aside h2, nav h2 {  font-size: 25px;}/* Level 2 */section section h2, section article h2, section aside h2, section nav h2,article section h2, article article h2, article aside h2, article nav h2,aside section h2, aside article h2, aside aside h2, aside nav h2,nav section h2, nav article h2, nav aside h2, nav nav h2 {  font-size: 20px;}

is写法

/* Level 0 */h2 {  font-size: 30px;}/* Level 1 */:is(section, article, aside, nav) h2 {  font-size: 25px;}/* Level 2 */:is(section, article, aside, nav):is(section, article, aside, nav) h2 {  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它们三者的关系

到此，关于“css伪类选择器:is :not的介绍”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！