与 :not CSS 相反

在 CSS 中，可以使用选择器来选择需要样式化的元素。:not 是其中一种比较特殊的选择器，会选择除了指定元素外的所有元素。那么我们接下来将介绍 :not 的使用方法，并实现与其相反的选择器。

:not 选择器

:not 选择器可以用来排除匹配特定选择器的元素，例如：

p:not(.class) {
  /* 将不拥有 class 类的 p 元素应用以下样式 */
  color: red;
}

在上面的代码中，:not(.class) 会选择除了拥有 class 类的 p 元素之外的所有 p 元素，并添加 color: red 样式。

与 :not 相反

在 CSS3 中，可以使用 :matches 选择器来实现与 :not 相反的选择器。

p:matches(.class) {
  /* 选择所有拥有 class 类的 p 元素，并应用以下样式 */
  color: red;
}

与 :not 相反的是，:matches 选择器选中的是指定选择器匹配的元素，而排除指定选择器不匹配的元素。所以，上面的代码会选择拥有 .class 类的 p 元素，并添加 color: red 样式。

当然，由于 :matches 在现代浏览器中得到广泛支持，因此可以将其与其他选择器组合使用，例如：

p:matches(.class):not(#id) {
  /* 选择所有拥有 class 类而不拥有 id 的 p 元素，并应用以下样式 */
  color: red;
}

上面的代码会选择拥有 .class 类而不拥有 #id 的 p 元素，并添加 color: red 样式。

总结

本文中，我们介绍了 :not 选择器及其用法，并实现了与其相反的选择器 :matches。选择器是 CSS 中非常重要的一个概念，了解其用法可以使我们更好地控制和布局页面元素。