使用：not和bootstrap覆盖样式

Question

在我的style.css我将链接颜色定义为：

a {
    color: #333;
    text-decoration: none;
}
a:hover {
    color: #333;
    text-decoration: underline;
}

但是，它覆盖了引导程序警报中链接的默认颜色，我也将其用作支架（通常是引导程序）。

我读到可以使用:not覆盖某些内容。

我试图避免更改或在引导程序中使用!important ，因为我是从CDN抓取的。

所以我尝试了这个：

a:not(.alert > a) {
    color: #333;
    text-decoration: none;
}
a:hover:not(.alert > a) {
    color: #333;
    text-decoration: underline;
}

HTML：

<div class="alert alert-dismissible alert-success" id="autoclose-success">
Some message here.<a href="#" class="close dismiss-messages dismiss-messages-processed"><span aria-hidden="true">×</span></a>
</div>

但这是行不通的。 我使用错了吗？ 实现此目标的最佳方法是什么？

Answer 1

那是:not()的错误用法，

否定CSS伪类:not(X)是一种功能表示法，采用简单的选择器X作为参数。 它与参数未表示的元素匹配。 X不能包含另一个否定选择器。

要覆盖它，您需要在规则中更具体一些，例如：

 .parent .alert-dismissible .close { color: red; text-decoration: none; } .parent .alert-dismissible .close:hover { color: #333; text-decoration: underline; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <div class="parent"> <div class="alert alert-dismissible alert-success" id="autoclose-success"> Some message here.<a href="#" class="close dismiss-messages dismiss-messages-processed"><span aria-hidden="true">×</span></a> </div> </div> 

Answer 2

:not() （或此时的任何CSS选择器）都不能将DOM向上移动到父选择器。

因此，不幸的是，您需要在覆盖样式中执行以下操作：

.alert a {
    /* override styles here for any a element IN .alert */
}

或者，或者：

:not(.alert) a {
    /* override styles for anything EXCEPT alert > a */
}

只要在加载引导程序后加载覆盖样式，就无需使用!important