Пусть говорят, что у меня есть глобальный css файл, global.css:Как я могу переопределить свойство css?
.my-class {
background-color:red;
}
И мне нужен конкретный css файл, specific.css, только для определенного html файла. И этот файл html также имеет class по имени my-class. В это время, однако, я хочу сделать этот цвет фона html синим. Как это сделать в файле specific.css?
Существует несколько способов сделать это.
Вариант № 1 должен убедиться, что ваш файл specific.css включен после вашего глобального. это приведет к стиранию стилей.
Например:
<link href="global.css" rel="stylesheet" type="text/css" />
<link href="specific.css" rel="stylesheet" type="text/css" />
Вариант № 2 является использование CSS специфичностью.
Смотрите здесь для получения дополнительной информации о том, что: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
Вариант # 3 является использование !important в вашем стиле, который вы хотите иметь приоритет.
Это не рекомендуется, но будет работать, если вышеуказанные два варианта не помогут вам в том, что вам нужно.
Это тоже работает, если это компоненты бутстрапов? Я имею в виду, что 'global.css' определяет' css' для определенного компонента начальной загрузки, а 'specific.css' также определяет css этого компонента. – user3595632
Да будет работать независимо, просто нужно называть то же самое (или быть более конкретным (как упоминание в № 2)), чем загрузочные файлы и загружаться после загрузочных файлов css. –
Если вы определяете другой элемент background-color в CSS файл, который был загружен ПОСЛЕ global.css (например, нагрузок specific.css после global.css в вашей HTML-разметке). Вы также можете использовать тег !important для перезаписывания ВСЕХ других определенных стилей, но обычно вам это не понадобится. Его называют каскадом таблиц стилей по причине.
Добавить '.my-class { background-color: blue! Important; } 'в вашем файле specific.css –