Переопределение CSS, использующего: not Selector

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

Использование Я обнаружил, что мой класс загружен после исходного класса таблицы, но он переопределяется оригиналом. Я также экспериментировал, заменив мой CSS следующим образом:

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

... но я получаю тот же результат. Вероятно, есть несколько обходных решений, которые я мог бы использовать (например, !important, если это действительно пришло к нему), но я хотел бы понять, что происходит первым и, надеюсь, придумать более чистое решение. Есть идеи?

Answer 1

Если мы рассмотрим оба:

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

.gridview a 
C   T 

В селекторе бутстрапа есть немного более специфичная особенность. Селектор псевдокласса более конкретный. Таким образом, измените свой класс таким образом:

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

Будет ли это работать. Или, чтобы быть более конкретным, вы можете дать все значения:

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

Answer 2

Речь идет о специфичности.

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

более специфичен, чем

.another_div a {color:#fff;} 

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

Вы должны организовать его снова с более высоким удельным выбора

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

Answer 3

попробовать это:

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

More information about css selectors