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

最新推荐文章于 2026-02-19 08:25:12 发布

原创最新推荐文章于 2026-02-19 08:25:12 发布 · 920 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

前端

css

css3

这篇博客探讨了如何使用CSS的`:not`、`:is`和链式`:not`选择器来更高效地编写样式规则。通过实例，解释了如何在不改变HTML结构的情况下，改变除`<p>`标签外的`<div>`内元素的颜色，并利用`:is`简化多层嵌套的选择器。此外，还介绍了`: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;
}