如何从 CSS 选择器中排除特定的类名？

在编写 CSS 样式表时，经常需要为 HTML 元素添加类名，以便能够通过类名来选择元素进行样式修改。但是，有时候需要在选择器中排除掉某个具体的类名，以达到更精确地选择目标元素的目的。本文将介绍如何在 CSS 选择器中排除特定的类名。

方法一：使用:not()伪类

:not()伪类可以用来选择除了括号里面指定的元素以外的所有元素，语法如下：

:not(selector)

其中，selector是需要排除的选择器。例如，下面的这个选择器将选中所有 class 为menu的元素，除了拥有disabled类名的元素：

.menu:not(.disabled) {
  /* styles here */
}

可以看到，通过:not()伪类可以很方便地排除掉特定的类名，同时保留其他所有的 class。

方法二：使用多个类名

在 HTML 中，可以给一个元素同时添加多个类名。在 CSS 中，如果想要同时使用多个类名来选择元素，只需要在选择器中使用多个点号来分隔即可。例如，下面的选择器将选择拥有menu类名，但不拥有disabled类名的所有元素：

.menu:not(.disabled) {
  /* styles here */
}

如果在 HTML 中只想要为一个元素添加部分类名，那么在 CSS 中就可以通过在选择器中只保留需要的类名来排除掉不需要的类名。

方法三：使用:not()伪类和多个类名

有时候想要同时使用:not()伪类和多个类名来选择元素，例如希望排除掉既拥有menu类名又拥有disabled类名的元素。这时候可以使用:not()伪类和多个类名的组合，例如下面这个选择器：

.menu:not(.disabled, .hidden) {
  /* styles here */
}

这个选择器将选择拥有menu类名，但不拥有disabled类名和hidden类名的所有元素。

总结

在 CSS 选择器中排除特定的类名是一个常见的需求，上面介绍了使用:not()伪类、多个类名以及它们的组合来实现这个功能的方法。无论使用哪种方法，都需要在选择器中精确指定需要选择的元素，以避免对其他元素产生干扰。