с работы.
С:
Почему Bootstrap не удаляет гиперссылки, подчеркивающие егоtext-decoration: none?
СЛОМАТЬ:
По умолчанию Bootstrap выдает все гиперссылкиtext-decoration: none с CSS с низкой специфичностью:
a {
text-decoration: none;
}
Однако это на самом деле не удаляет подчеркивание по умолчанию из гиперссылок:
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<a href="#">Should have no text-decoration</a> (through Bootstrap)
</body>Нет правил с более высокой специфичностью, чемtext-decoration: none, На самом деле, нет никаких других правил, влияющих на оформление текста навсе, Когда Bootstrap удален и на его месте добавлен тот же CSS, текстовое оформлениеявляется удалены:
a {
text-decoration: none;
}<a href="#">Should have no text-decoration</a> (inline)Bootstrap также, кажется, имеет приоритет в этом поведении; когда вы используете вышеупомянутый CSS вместе с Bootstrap, не имеет значения, имеет ли ваша декларация больше специфичности или нет; ссылки по-прежнему будут подчеркнуты:
a, div a {
text-decoration: none;
}<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<a href="#">Bootstrap has higher specificity</a>
<div>
<a href="#">Inline CSS has higher specificity</a>
</div>
</body>Интересно отметить, что добавление!important удаляет украшение, даже если нет «более конкретных» объявлений:
a {
text-decoration: none !important;
}<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<a href="#">!important</a>
</body>Так почему Bootstrap не удаляет подчеркивание гиперссылки по умолчанию при реализацииtext-decoration: none?