CSS伪类选择器is和not详解

在CSS的世界里，伪类选择器可谓是锦上添花的存在，它们允许我们根据元素的特定状态或行为进行选择，以实现更加细粒度的样式控制。而is和not是CSS伪类选择器家族中颇具魅力的成员，今天，我们就来深入了解一下它们的用法和技巧。

is伪类选择器

is伪类选择器用于检查元素是否属于指定的类名或其他选择器。它的语法很简单：

is(selector) {
  /* styles */
}

其中，selector可以是任何有效的CSS选择器，比如类名、ID选择器、元素选择器等。

应用场景

is伪类选择器最常见的应用场景之一是针对不同的浏览器或者设备应用不同的样式。例如，我们可以使用is伪类选择器来针对支持Flexbox的浏览器应用Flexbox样式，而对于不支持Flexbox的浏览器则应用另一种样式：

.flex-container {
  display: flex;
}

@supports (display: flex) {
  .flex-container {
    is(flex) {
      display: flex;
    }
  }
}

在上面的代码中，我们首先定义了.flex-container的默认样式，然后使用@supports规则来检查浏览器是否支持Flexbox。如果支持，则应用is(flex)伪类选择器，并再次设置.flex-container的样式为display: flex。

另一个常见的应用场景是使用is伪类选择器来实现悬停效果。例如，我们可以使用is(:hover)伪类选择器来为元素在悬停时添加样式：

a:hover {
  color: blue;
}

not伪类选择器

not伪类选择器用于排除符合指定选择器的元素。它的语法也很简单：

not(selector) {
  /* styles */
}

其中，selector同样可以是任何有效的CSS选择器。

应用场景

not伪类选择器最常见的应用场景之一是排除子元素。例如，我们可以使用not伪类选择器来为父元素的所有子元素应用样式，但排除其中的特定元素：

.parent {
  color: black;
}

.parent > :not(.child) {
  color: red;
}

在上面的代码中，我们首先定义了.parent的默认样式。然后，我们使用.parent > :not(.child)伪类选择器来选择.parent的所有子元素，但排除其中的.child元素。最后，我们为这些子元素设置color属性值为red。

not伪类选择器还经常用于创建更复杂的样式规则。例如，我们可以使用not伪类选择器来实现暗模式切换。具体做法是，我们可以定义一个.dark-mode类名，并使用媒体查询来检测是否处于暗模式。然后，我们可以使用not伪类选择器来为处于暗模式下的元素应用.dark-mode类名的样式：

@media (prefers-color-scheme: dark) {
  body:not(.dark-mode) {
    background-color: black;
    color: white;
  }
}

结语

CSS伪类选择器is和not是强大的工具，可以帮助我们在前端开发中实现更加细粒度的样式控制。通过理解和掌握它们的用法，我们可以编写出更加优雅和高效的CSS代码。