CSS 在:not()内使用多个类

在本文中，我们将介绍如何在 CSS 中使用多个类作为 :not() 选择器的参数。:not() 选择器可以用于选取除了指定类以外的元素。

阅读更多：CSS 教程

什么是 :not() 选择器？

:not() 选择器是 CSS3 中引入的选择器之一，用于选取除了指定条件以外的元素。它的语法如下：

:not(selector) {
  /* CSS 属性 */
}

其中，selector 可以是任意的 CSS 选择器。

在 :not() 内使用一个类是最常见的用法。例如，如果我们要选取除了拥有 “hide” 类以外的所有元素，可以这样写：

:not(.hide) {
  /* CSS 属性 */
}

上面的代码将选取所有没有 “hide” 类的元素，并对其应用指定的 CSS 属性。

如果我们想要同时排除多个类，可以在 :not() 内使用多个类名，并用逗号分隔。例如，如果我们想要选择除了 “hide” 和 “inactive” 类以外的所有元素，可以这样写：

:not(.hide, .inactive) {
  /* CSS 属性 */
}

上面的代码会选择所有没有 “hide” 和 “inactive” 类的元素，并将指定的 CSS 属性应用于它们。

此外，我们还可以在 :not() 内使用多个类名的组合。例如，如果我们想要选择除了同时拥有 “hide” 和 “inactive” 类的元素以外的所有元素，可以这样写：

:not(.hide.inactive) {
  /* CSS 属性 */
}

上面的代码会选取所有没有同时拥有 “hide” 和 “inactive” 类的元素，并对其应用指定的 CSS 属性。

为了更好地理解，在这里我们提供一些示例。

假设我们有以下 HTML 代码：

<div class="box hide">隐藏框</div>
<div class="box inactive">不活跃框</div>
<div class="box">普通框</div>

如果我们想要选取除了拥有 “hide” 类以外的所有框，可以这样写 CSS：

.box:not(.hide) {
  background-color: red;
}

上面的代码会将除了拥有 “hide” 类的框以外的所有框的背景颜色设置为红色。

同样地，如果我们想要选取除了同时拥有 “hide” 和 “inactive” 类的框以外的所有框，可以这样写 CSS：

.box:not(.hide.inactive) {
  background-color: blue;
}

上面的代码会将除了同时拥有 “hide” 和 “inactive” 类的框以外的所有框的背景颜色设置为蓝色。

在本文中，我们介绍了在 CSS 中在 :not() 选择器中使用多个类的方法。我们学习了如何在 :not() 内使用一个类、多个类以及多个类的组合，并提供了相应的示例。通过运用这些技巧，我们可以更灵活地选择并应用 CSS 样式，从而实现更丰富的布局和设计效果。