Отменить стиль Bootstrap 5 на навигационной ссылке
* Обновлено: на этот вопрос дан достаточный ответ, и проблема, которую я описываю ниже, по-видимому, изначально не существовала, так что в любом случае это спорный вопрос. Извините, и спасибо, Шон Варнхэм!
Я только учусь программировать для веб-сайтов. Я пытаюсь сделать навигационную панель, основанную на стандартной от Bootstrap 5. Она состоит из нескольких элементов nav-item с элементами nav-link внутри них. Я хочу, чтобы элементы nav-link выглядели так, как я хочу.
Я думал, что должен просто иметь возможность обратиться к классу в моем CSS, чтобы отменить любые стили того же класса, что и в файле CSS Bootstrap. Но единственный способ, которым мне удалось это сделать, - это либо использовать !important (что, как мне сказали, является способом сделать это ленивым кодировщиком), добавляя идентификатор к каждой ссылке (что очень громоздко), либо изменив имя класса (это мое текущее решение, см. также полный код навигационной панели в моем CodePen здесь, но тогда какой смысл использовать Bootstrap?).
Я просмотрел CSS-код Bootstrap 5, и, насколько я могу судить, элементы nav-link всегда рассматриваются только как классы, что должно быть легко отменять, не так ли?
Как я думал, это сработает:
.nav-link {
color: red;
}<link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin = "anonymous">
<li class = "nav-item">
<a class = "nav-link" aria-current = "page" href = "#">HOME</a>
</li>В результате красными буквами.
Но этого не происходит (* edit: подождите, теперь это работает. Я не знаю, почему этого не было раньше.) Три решения, которые действительно работают, но являются обходными путями:
1.
.nav-link {
color: red !important;
}<link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin = "anonymous">
<li class = "nav-item">
<a class = "nav-link" aria-current = "page" href = "#">HOME</a>
</li>2.
#navhome {
color: red;
}<link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin = "anonymous">
<li class = "nav-item">
<a class = "nav-link" id = "navhome" aria-current = "page" href = "#">HOME</a>
</li>3.
.nav-link2 {
color: red;
}<link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin = "anonymous">
<li class = "nav-item">
<a class = "nav-link2" aria-current = "page" href = "#">HOME</a>
</li>Что мне здесь не хватает?
Ответы 3
Ключевым моментом в CSS является то, насколько вы конкретны (или специфика).
Есть несколько способов добиться того, что вы пытаетесь сделать:
- Загрузите свою собственную таблицу стилей после таблицы стилей Bootstrap,
- Создайте идентичные / более конкретные ссылки на класс, который вы пытаетесь изменить.
Первый этап - это так же просто, как разместить вашу собственную таблицу стилей после начальной в HTML, PHP и т.д. (в зависимости от того, как вы загружаете таблицы стилей).
Второй пункт можно решить, выполнив что-то вроде этого:
.nav-link a {
color: red;
}
Таким образом, вы специально нацеливаетесь на якоря в классах .nav-link. Если это не сработает, вам может потребоваться более конкретная информация, добавив атрибут ID родительского узла или родительский класс, например:
#targetID .nav-link a {
color: red;
}
Примечание: Вы должны попытаться уменьшить специфичность свойств CSS, которые трудно перезаписать, потому что слишком конкретное и добавление большого количества классов может быстро увеличить размер таблицы стилей. Затем это может иметь побочные эффекты для таких вещей, как скорость страницы и т. д.
Более подробную информацию о специфике можно найти здесь:
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
Хорошо, рад, что теперь он работает.
Это необходимо для изменения вашего файла .css
цвет белый; изменить на цвет: красный;
.nav-link2 {
font-family: 'roboto';
font-size: 14px;
font-weight: 300;
color: white;
text-decoration: none;
padding-left: 12px;
padding-right: 12px;
padding-top: 28px;
padding-bottom: 29px;}
О да, прости. Красный был просто для демонстрационных целей. Белый - это тот цвет, который мне действительно нужен на моей панели навигации.
использование компонентов начальной загрузки для создания пользовательских компонентов просто делает все намного сложнее У меня была эта проблема раньше, когда я пытался сделать настраиваемую разбивку на страницы с компонентами начальной разбивки на страницы а потом я понял, что использовать html и css намного проще и чище. используйте компоненты начальной загрузки, если вы действительно хотите этот конкретный стиль или просто хотите создать что-то быстро
Согласовано. Хотя я думаю, что использование их кода и попытки изменить каждый компонент или разработка того, как они сделали конкретную вещь, очень поучительны. Но да, если вы достаточно хорошо разбираетесь в кодировании, вам, вероятно, следует использовать их только тогда, когда вам нужно сделать что-то быстро и не слишком оригинально.
Спасибо! Я действительно не думал о порядке таблиц стилей и о том, как это может повлиять на то, какой стиль CSS будет первым. Кроме того, по какой-то причине то, как я изначально думал, что это будет работать, теперь работает. Не знаю, почему не проверял в последний раз. Не думаю, что я что-то изменил. Но в любом случае это хорошая информация!