Так что это странная ошибка, которую я не могу понять.
Я использую сброс Мейерса в своем приложении. Но когда я редактирую свой основной файл CSS, чтобы изменить размер шрифта h1, он не изменит его. Но когда я помещаю его в тег body, он работает. Может ли кто-нибудь объяснить это мне?
Пример
base.css.scss
h1 {
font-size: 2em; //--This doesnt work
}
body {
width: 100%;
height: 100%;
h1 {
font-size: 2em; //-- This works
}
}
Не забудьте включить файл сброса перед файлом base.css.scss. Похоже, это перезаписывает правило h1.
Возможны три причины этой проблемы. Во-первых, убедитесь, что вы не пытаетесь использовать SASS в браузере. Его нужно будет полностью преобразовать в простой CSS, прежде чем вы сможете использовать его там. Во-вторых, убедитесь, что используемый вами селектор имеет более высокую специфичность. То есть убедитесь, что селектор более конкретен, чем другой селектор, устанавливающий свойство. body h1 имеет более высокую специфичность, чем просто h1. Хотя при перезагрузке Мейера это не должно быть проблемой. В-третьих, порядок. Если два селектора имеют одинаковый уровень специфичности, приоритет получает тот, который появится позже. Убедитесь, что ваш сброс происходит перед любым другим CSS на вашей странице.
ты же переопределял, поэтому второе присвоение Н1 не работает, хотя пользоваться можно! важно, но я бы не стал
Потому что второй имеет большую специфичность, чем первый: в этом случае body h1 имеет большую мощность, чем h1
Проблема, с которой вы столкнулись, двояка. Существует проблема специфичности, а также проблема каскадирования. Вы не сможете переопределить стиль до того, как он будет объявлен, без использования и !important. Таким образом, ваше переопределение должно быть после сброса.
Вы также захотите сопоставить селектор, который вы пытаетесь переопределить. Поэтому, если ваш сброс нацелен на элемент с селекторами body и h1, сделайте то же самое, чтобы переопределить стили.
body h1 { font-size: 2em; }
