在容器内设置 link 的默认颜色，而不覆盖其他规则？

Question

我有两个容器：left 和 right

我想将 left 中链接的默认颜色设置为蓝色，将 right 中的链接默认颜色设置为红色

这不是我想要的：

.left a { color: #00F; }
.right a { color: #F00; }

我不想要的原因是，由于 css 特异性规则，该代码段将覆盖 a 标签的所有其他 color。请参阅此 jsfiddle - http://jsfiddle.net/jvanasco/q4oxmpxc/ - 其中 bootstrap 的 label class 的颜色被覆盖

是否可以达到我想要的效果？

Answer 1

这可以帮助您解决 :not() 选择器的问题吗？

.left a:not(.label) {
    color: #00F;
}

.right a:not(.label) {
    color: #F00;
}

Answer 2

您必须添加额外的 CSS class 才能实现此目的，例如：

.left .link {
    color: #00F;
}

<div class="left">
        <a href="#" class="link">Left</a>
</div>

或者像上面提到的 sdcr 那样做，但是对于每一个有问题的情况，你都必须添加一个额外的 "hack"。例如，如果以后除了标签还有另一个问题——你将不得不再次编辑样式表。

Answer 3

这是一个使用 jQuery 的解决方案：

$('.label').css('color','#fff');

Answer 4

一个选项是 select a 个元素没有个 class。您可以通过组合 :not() pseudo class and the attribute selector [class].

来实现此目的

在这样做时，您基本上否定了所有锚元素 with a class.

.left a:not([class]) {
    color: #00F;
}
.right a:not([class]) {
    color: #F00;
}

Set the default color of a link within a container, without overriding other rules?