如何在元素带有指定修饰类时应用UnoCSS规则？

我的HTML页面中，部分链接会被第三方库自动添加router-link-active类，当前代码结构如下：

<a href=".." class="text-red">Inactive link</a>
<a href=".." class="text-red router-link-active">Active link</a>

我需要用UnoCSS实现：当链接处于激活状态（带有router-link-active类）时，文字颜色从红色变为蓝色。

解决方案 #

直接在链接的class属性中使用UnoCSS的条件类语法，通过has-(.router-link-active):text-blue指定激活状态下的样式，最终写法如下：

<a href=".." class="text-red has-(.router-link-active):text-blue">Link</a>

生成的对应CSS #

UnoCSS会自动生成以下CSS规则，确保激活态链接的文字颜色被覆盖为蓝色：

has-\(\.router-link-active\)\:text-blue.router-link-active {
  color: blue;
}

内容的提问来源于stack exchange，提问作者Ilya Semenov