覆盖使用a：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

关于特异性。

<?php echo round($arrFirstBox["silentsecond"],2)?>

比

更具体

.some_div .another_div a {color:#000;}

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

您应该使用更高的特定选择再次安排

.another_div a {color:#fff;}

Answer 2

如果我们检查两者：

doing cleaning 
doing washing
doing shopping

 cleaning is done
 washing is done
 shopping is done

bootstrap的选择器有一点特异性。伪类选择器更具体。所以改变你的课程：

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

.gridview a
C         T

会让它发挥作用。或者更具体地说，您可以提供所有值：

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

Answer 3

试试这个：

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

More information about css selectors