css中你不知道的:not,:is选择器用法

:not

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

<div class="box">
      <span>我是蓝色</span>
      <p>我是黑色</p>
      <h1>我是蓝色</h1>
      <h2>我是蓝色</h2>
      <h3>我是蓝色</h3>
      <h4>我是蓝色</h4>
      <h5>我是蓝色</h5>
 </div>

一般的写法：

.box span,.boxh2,.boxh3, .boxh4,...{
  color: blue;
}

:not的写法：

.box > :not(p) {
  color: blue;
}

链式:not

.box > :not(p):not(span) {
  color: blue;
}

:is

有点像提取共有变量一样
目标：想div下的p标签为红色

	<div class="div1">
        <p>p1</p>
    </div>
    <div class="div2">
        <p>p2</p>
    </div>
    <div class="div3">
        <p>p3</p>
    </div>

一般的写法：

.div1>p{
    color:red;
}
.div2>p{
    color:red;
}
.div3>P{
    color:red;
}

或者

.div1>p,
.div2>p,
.div3>P{
    color:red;
}

:is的写法：把相同的部分提出来

:is(.div1,.div2,.div3) > P {
  color:red;
}

随着嵌套的增多，:is的好处越来越明显

老的写法：

h1 {
  font-size: 30px;
}

section h1, article h1, aside h1, nav h1 {
  font-size: 25px;
}

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;
}

新的写法：

h1 {
  font-size: 30px;
}

:is(section, article, aside, nav) h1 {
  font-size: 25px;
}

:is(section, article, aside, nav)
:is(section, article, aside, nav) h1 {
  font-size: 20px;
}