5分钟读懂css伪类选择器:is :not【html5教程】,: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组合是大势所趋

本文来自ki4网，CSS教程栏目，迎接进修

以上就是5分钟读懂css伪类挑选器:is :not的细致内容，更多请关注ki4网别的相干文章！