Использование: нет и начальной загрузку, чтобы переопределить стили

Question

В моих style.css я определяю мою ссылку цвета, как:

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

Однако это переопределение цвета по умолчанию для ссылок в предупреждениях бутстраповских, которые я использую (и начальная загрузка в целом) в качестве лесов.

Я прочитал, что можно использовать :not, чтобы переопределить некоторые вещи.

Я стараюсь избегать изменения или использования !important в bootstrap, поскольку я беру его из 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 селекторы в это время) не могут пройти вверх DOM для родительских селекторов.

Так, к сожалению, вам нужно сделать что-то вроде так в ваших стилей переопределяют:

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

Или, наоборот:

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

Так долго, как ваши стили переопределения загружаются после загрузочный загрузочный файл, не требуется !important

Answer 2

Это неправильное использование для :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>