css - 覆盖使用 :not Selector 的 CSS

Question

我正在使用自定义 Bootstrap 主题，并想为某些表创建一个新类。原始 CSS 有以下行:

table a:not(.btn), .table a:not(.btn) {
    text-decoration: underline;
}

后来，我添加了自己的自定义 CSS，以从链接中删除下划线:

.gridview a {
    text-decoration: none;
}

HTML:

<table class="table gridview">...

使用 Chrome 的开发人员工具，我可以看到我的 gridview 类是在 原始表类之后加载的，但它被原始表类覆盖了。我还尝试用以下内容替换我的 CSS:

table a, .table a {
    text-decoration: none;
}

...但我得到了相同的结果。可能有一些我可以使用的解决方法(例如 !important 如果真的遇到它)，但我想先了解发生了什么，并希望提出一个更清洁的解决方案。有什么想法吗？

Answer 1

如果我们同时检查:

.table a:not(.btn)
C      T:S

.gridview a
C         T

在 Bootstrap 的选择器中有更多的特殊性。伪类选择器更具体。所以把你的类(class)改成这样:

.gridview a, .gridview a:not(.btn)

会成功的。或者更具体地说，您可以给出所有值:

table.gridview a:not(.btn), .table.gridview a:not(.btn)