:is() :where() :not()伪类选择器

:is()伪类的使用

例如对下面html中的a标签加上样式

<h1><a href="javascript:;">链接</a></h1>
<p><a href="javascript:;">链接</a></p>
<div class="box"><a href="javascript:;">链接</a></div>

普通常用的方法就是下面这样，写起来感觉很臃肿，重复度高

h1 a,p a, div a{
  color:red;
}

下面用:is()伪类来写，就简单明了的多，和上面的样式效果一样

:is(h1,p,div) a{
  color:blue;
}

:is()伪类也可以与伪类一起用

:is(h1,p,div) a:hover{
  color:pink;
}

:is()伪类也可以与伪元素一起用

:is(h1,p,div) a:hover::before{
  content:"我是";
}

:where()伪类的使用

:where()伪类选择器和:is()用法一样，但是:where()优先级是0

:where(h1,p,div) a{
  color:yellow;
}

is伪类.png

:not()伪类的使用

可以让样式作用不到not伪类中的选择器上

<ul>
  <li>1111111111111</li>
  <li>2222222222222</li>
  <li class="three">3333333333333</li>
  <li>4444444444444</li>
  <li>5555555555555</li>
  <li>6666666666666</li>
</ul>

下面第一个选择器可以不作用在最后一个li上，第二个不作用在class为three的li上

ul li:not(:last-child){
  font-size: 18px;
}
ul li:not(.three){
  color: red;
}

可以将not选择器多个连接起来使用，下面选择器是不作用到第一个和倒数第二个

ul li:not(:first-child):not(:nth-last-child(2)){
  font-weight:bold;
}

not伪类.png