纯CSS判断多个class同时存在并设置样式的方法

在前端开发中，我们经常会遇到需要根据元素是否同时具有多个class来设置特定样式的情况。纯CSS提供了一些巧妙的方法来实现这一需求，下面就来详细介绍一下。

方法一：使用相邻选择器

相邻选择器可以用来选择紧挨着的特定元素。我们可以利用这个特性来判断多个class是否同时存在。例如，假设我们有一个元素同时具有class1和class2，我们可以这样写CSS代码：

.class1.class2 {
  color: red;
}

在上述代码中，只有当元素同时具有class1和class2时，文字颜色才会被设置为红色。这种方法简单直接，适用于判断较少数量的class同时存在的情况。

方法二：利用伪类选择器

伪类选择器也可以帮助我们实现判断多个class同时存在的功能。例如，我们可以使用:not()伪类选择器来排除不满足条件的元素。示例代码如下：

:not(.class1):not(.class2) {
  color: black;
}

.class1.class2 {
  color: red;
}

在这段代码中，首先将不具有class1和class2的元素文字颜色设置为黑色，然后再将同时具有这两个class的元素文字颜色设置为红色。

方法三：使用CSS变量

CSS变量是一种强大的工具，我们可以利用它来判断多个class是否同时存在。定义两个CSS变量，然后根据元素是否具有特定的class来设置变量的值，最后根据变量的值来设置样式。示例代码如下：

:root {
  --has-class1: 0;
  --has-class2: 0;
}

.class1 {
  --has-class1: 1;
}

.class2 {
  --has-class2: 1;
}

[style*="--has-class1: 1"][style*="--has-class2: 1"] {
  color: red;
}

通过以上几种方法，我们可以在纯CSS中轻松判断多个class是否同时存在，并根据判断结果设置相应的样式。在实际开发中，可以根据具体需求选择合适的方法来实现这一功能，从而提高代码的可读性和可维护性。