Tailwind/纯CSS/SCSS中多类条件判断的样式实现咨询

我当前使用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)]的正确写法是什么？同时请提供可行的纯CSS解决方案。

不需要使用:has()选择器，直接将两个条件合并到同一个&选择器组合中即可，正确写法如下：

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

这里的[&.ng-dirty:not(.ng-invalid)]表示当前元素同时满足两个条件：拥有.ng-dirty类，且没有.ng-invalid类，配合hover:前缀就能实现目标悬停样式。

直接编写CSS规则，针对符合条件的元素设置悬停状态的边框样式：

/* 匹配Tailwind border-gray-500的默认色值#6b7280 */
.ng-dirty:not(.ng-invalid):hover {
  border-color: #6b7280;
}

如果项目中自定义了gray-500的色值，替换对应的颜色代码即可。

内容的提问来源于stack exchange，提问作者Sidharth Bajpai