Вопрос по css, twitter-bootstrap-3, css3, twitter-bootstrap –  с работы.

1

С:

Почему 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?

Не вижу подчеркивания в текущем Chrome. Robby Cornelissen
Кажется, только подчеркивается в состоянии: hover. Mark
Как оказалось, парение в Bootstrap на самом делеявляется применение более высокой специфичности;text-decoration: underline; происходит отa:focus, a:hover вtab-focus.lessкоторый, очевидно, имеет более высокую специфичность, чем простоa. Obsidian Age

Ваш Ответ

2   ответа
0

что вы сказали, в вашем проекте есть правило CSS, которое переопределяет Bootstraptext-decoration: none, Ссылки в вашем демонстрационном коде ведут себя правильно.

Это могут быть настройки вашего браузера

Если загрузка вашей страницы в другом браузере исправляет ситуацию, это так. Некоторые браузеры позволяют пользователям переопределять определенные стили CSS.

Это может быть другой файл CSS

Загрузите страницу в Google Chrome. Щелкните правой кнопкой мыши по ссылке, затем нажмите «Проверить элемент». Вы увидите все действующие правила CSS, включая правило, запрещающее загрузкуtext-decoration: none с работы.

2

вы обращаетесь к подчеркиванию при наведении курсора на ссылку, поскольку это единственное, что, похоже, не работает.

Ответ прост: вы не нацелены на состояние наведения. Также обычно рекомендуется обрабатывать состояние фокуса для навигации с помощью клавиатуры. Попробуй это...

a, a:hover, a:focus {
    text-decoration: none;
}
Для более ясного объяснения, более правильный способ переопределить стили Bootstrap по умолчанию - включить ваши собственные переменные .scss (или variables.less) ПЕРЕД стилями Bootstrap, а затем скомпилировать их в CSS как часть процесса сборки. В этом случае вы должны установить$link-hover-decoration переменная в none, вместо подчеркивания, замеченная в этом разделе переменныхgetbootstrap.com/customize/#scaffolding. hellojason
Правильный; Я изначально не понимал, что Bootstrap автоматически применяетtext-decoration: underline вa:focus, a:hover (вtab-focus.less). Я должен был это заметить. Объявление состояния наведения в объявлении действительно решает проблему - это правильный ответ, и я отмечу как принятый через несколько минут, когда система позволит мне :) Obsidian Age

Похожие вопросы