Изменить цвет h1 в css на основе класса div с пробелом в нем
В настоящее время я пытаюсь изменить цвет заголовка, ссылаясь на класс div.
До сих пор я пробовал:
.pagetitle-title.heading {
color: purple;
}<div class = "container">
<h1 class = "pagetitle-title heading">IT•ONE Method</h1>
</div>И даже:
h1 {
color: purple;
}
То, как вы это написали, без другого кода, должно работать. Кроме того, в своем заголовке вы говорите «на основе класса div», но вы стилизуете класс тега h1. jsfiddle.net/hxecbL56
Похоже на классический случай перезаписи CSS. Вероятно, у вас есть CSS, перезаписывающие CSS, который вы пытаетесь применить. Попробуйте добавить !important в конце правил CSS. т.е. color: purple !important;.
Спасибо @martin, что сработало для меня (и Михай, наверное, ты прав)
Хорошо, я поставлю это как ответ. @jblaupunkt
Вы должен научитесь пользоваться инструментами разработчика, иначе любая проблема с CSS будет сводить вас с ума, и вы начнете применять ужасные решения, такие как использование !important (которых вам следует избегать любой ценой).
Я думаю, вам следует прочитать эту статью, она поможет вам лучше понять, почему ваши стили не работают, а также поможет вам увидеть, что происходит, когда вы используете инструмент разработчика элементов проверки css-tricks.com/specifics-on-css-специфичность.
@jblaupunkt рассмотрите возможность принятия ответа, чтобы эту тему можно было закрыть. :)
@martin только что закрылся, извините! все еще новичок в stackoverflow :)
Ответы 3
- Проверьте вашу ссылку "таблица стилей" для вашего CSS
- Откройте консоль отладки и определите свой h2, чтобы увидеть, нацелены ли параметры CSS.
- Попробуйте другой шестнадцатеричный код цвета
Добавьте «!важно» после кода цвета touy
цвет: фиолетовый! важно;
Я вижу ваш код, и это правильный способ изменить этот цвет, поэтому... Сначала попробуйте мой контрольный список и дайте нам свой отзыв.
Как упоминалось в моем комментарии, это выглядит как классический случай «перезаписи CSS». Один из «хаков», чтобы избежать этого, состоит в том, чтобы использовать свойство CSS !important, чтобы сообщить браузеру, какое правило CSS, в частности, важный, и не должно быть перезаписано.
Пример: color: purple !important;
CSS применяет стиль в том виде, в котором он загружен. Таким образом, если у вас есть 1 файл CSS с правилами x и второй файл CSS с правилами y, и оба они нацелены на одни и те же элементы, то файл CSS, который был загружен последним, обычно перезаписывает стили предыдущего.
Порядок известен как нисходящее правило и перезаписывается только свойством !important и в линию CSS. Свойство !Important обычно перезаписывает любой CSS в линию.
Учитывая информацию о нисходящее правило, и у вас есть средства для редактирования CSS и/или выбора порядка загрузки CSS, вы можете убедиться, что вы можете применять свои собственные правила CSS, загрузив их последними. включенный файл в ваш проект.
Пример:
<head>
<link rel = "stylesheet" type = "text/css" href = "loadedfirst.css">
<link rel = "stylesheet" type = "text/css" href = "loadedsecond.css">'
<link rel = "stylesheet" type = "text/css" href = "loadedlast.css">
</head>
В случае, если эти 3 файла имеют правила, которые применяются к одним и тем же элементам, файл загруженныйlast.css — это CSS, который перезапишет предыдущие, за исключением случая свойства !important и CSS в линию. Управляя порядком вашего CSS, вы можете избежать таких «хаков», как использование свойства !important.
Вы, кажется, просто замалчиваете все рейтинги специфичности. Они играют гораздо более важную роль, чем порядок таблиц стилей.
спасибо @Pete, ссылка, которую вы указали в комментарии выше, была очень полезной :)
Я бы избегал добавления важного, насколько это возможно. Я бы просто пошел выше к родителям и попытался настроить div как можно более конкретно. Вместо этого я бы пошел
.container h1.pagetitle-title.heading {
color: purple;
}
Если это не сработает, только тогда я бы использовал важный.
Любой из них должен работать. Что в нем не работает?