Question

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

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

然而，它覆盖了bootstrap警报中链接的默认颜色，我也使用它（以及一般的bootstrap）作为脚手架。

我读到可以使用: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不得包含另一个否定选择器。

要覆盖它，您需要在规则中更具体，如下所示：

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

使用：not和bootstrap覆盖样式

2 个答案: