5分钟读懂css伪类选中器:is :not

本文介绍一下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视频教程

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

最简便的例子，用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>

此前的做法

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 */
h1 {
  font-size: 30px;
}
/* Level 1 */
section h1, article h1, aside h1, nav h1 {
  font-size: 25px;
}
/* Level 2 */
section section h1, section article h1, section aside h1, section nav h1,
article section h1, article article h1, article aside h1, article nav h1,
aside section h1, aside article h1, aside aside h1, aside nav h1,
nav section h1, nav article h1, nav aside h1, nav nav h1 {
  font-size: 20px;
}

is写法

/* Level 0 */
h1 {
  font-size: 30px;
}
/* Level 1 */
:is(section, article, aside, nav) h1 {
  font-size: 25px;
}
/* Level 2 */
: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组合是大势所趋

本文来自PHP中文网，CSS教程栏目，欢迎学习

以上就是5分钟读懂css伪类选中器:is :not的具体内容，更多请关注百分百源码网其它相关文章！