具有Bootstrap和SASS对比度mixin的可访问`a`标签-CSS继承问题

如何解决具有Bootstrap和SASS对比度mixin的可访问`a`标签-CSS继承问题

我一直在研究mixin，以创建具有正确对比度的链接标签和文本。找到了许多辅助函数和混合函数后，我的Bootstrap SASS中有了这个代码段

@each $color,$value in $theme-colors {
    .bg-#{$color} {
        color: light-dark(theme-color("#{$color}"),theme-color("light"),theme-color("dark")) !important;
    }
    .bg-#{$color} a:not(.dropdown-item),.btn-#{$color}.btn-link,.bg-#{$color}.btn-link,a.badge-#{$color},a.btn-#{$color},a.link-#{$color} {
        color: contrast(theme-color("#{$color}"),$link-color) !important;
    }
    .bg-#{$color} a:not(.dropdown-item):hover,.btn-#{$color}.btn-link:hover,.bg-#{$color}.btn-link:hover,a.badge-#{$color}:hover,a.btn-#{$color}:hover,a.link-#{$color}:hover {
        color: darken(contrast(theme-color("#{$color}"),$link-color),15%) !important;
    }
}

这会创建一堆规则，其中文本是light或dark的缩写，链接是基本$link-color变量的变体。它可以简单地使阴影变暗或变亮，直到满足可访问性要求。

您将看到我添加了一个新的类.link-{color}，这使我可以手动替代此问题所涉及的问题，即：

如果我有以下顺序的CSS声明：

.badge-secondary a { color: {color2} !important }
.bg-primary a { color: {color} !important }

和HTML：

<div class="bg-primary">
    <span class="badge-secondary">
        <a href="#">text here</a>
    </span>
</div>

由于CSS中的.bg-primary主规则是在.badge-secondary规则之后出现的，因此a标签的颜色与主背景而非主背景的对比度相匹配。

由于这种嵌套可以按顺序进行，因此是否有CSS规则规定“此类的子级，除非它们也是另一类的子级”？

我知道我可以使用直接子声明bg-primary > a {}来做到这一点，但是不会将其应用于第二，第三或第四等子级的a标记。

我添加的a.link-{color}类有效，因为如果将此类直接应用于!important标记，则CSS属性上的a值将覆盖任何父属性。

<div class="bg-primary">
    <span class="badge-secondary">
        <a href="#" class="link-secondary">text here</a>
    </span>
</div>

那很好，但是依赖于在各处添加额外的类...

有什么想法吗？