Tailwind / Plain CSS / SCSS 中的 [&:not(.<class-name>)] 是否有相反的情况？ （仅当另一个指定的类附加到元素时才添加类）

Question

我有 class="hover:[&:not(.ng-invalid)]:border-gray-500"，仅当鼠标悬停在该输入上时，仅当 .ng-invalid 类未附加到该输入时，才会向输入边框添加灰色它。

有没有相反的东西，例如，我想添加这种灰色，只有当未附加 .ng-invalid 并且 .ng-dirty 附加到输入时，像这样：-

class="hover:[&:not(.ng-invalid)]:[&:has(.ng-dirty)]:border-gray-500" 对于上面的替换

[&:has(.ng-dirty)]

，我应该写什么来检查是否附加了.ng-dirty类？

请让我知道是否还有任何我应该考虑的纯 CSS 解决方案。

Answer 1

任意变体的特点是[]

内的任何内容都可以是任何CSS选择器。因此，在 CSS 中，要断言元素具有类，我们将使用 

class 选择器，如 .ng-dirty

。因此，我们可以将这个额外的限定符添加到现有的任意变体选择器中，以便 

:not(.ng-invalid)

 变为 

:not(.ng-invalid).ng-dirty

:

hover:[&:not(.ng-invalid).ng-dirty]:border-gray-500

<script src="https://cdn.tailwindcss.com/3.4.3"></script>

<div class="hover:[&:not(.ng-invalid).ng-dirty]:border-gray-500 border h-10 m-2"></div>

<div class="hover:[&:not(.ng-invalid).ng-dirty]:border-gray-500 ng-dirty border h-10 m-2"></div>

<div class="hover:[&:not(.ng-invalid).ng-dirty]:border-gray-500 ng-dirty ng-invalid border h-10 m-2"></div>

<div class="hover:[&:not(.ng-invalid).ng-dirty]:border-gray-500 ng-invalid border h-10 m-2"></div>