Восстановление цвета элемента до его исходного значения, когда есть переопределенный стиль, сформированный с помощью родительского селектора

Question

Таблица стилей Bootstrap имеет:

pre code {
    color: inherit;
}

Если моя страница теперь имеет явный pre code { color: red; }, стиль таблицы стилей Bootstrap по-прежнему имеет приоритет. Почему? [Редактировать: могу проигнорировать этот вопрос, так как он был из-за неправильного порядка определения.]

Как мне сделать color для pre code, чтобы взять цвет, вычисленный для code, без жесткого кодированиязначение цвета?

Bootstrap установил цвет для code равным # 383e3c в зависимости от выбранной темы. Я не знаю причину, почему он установил другой цвет для pre code. Я бы хотел, чтобы мой pre code имел тот же цвет, что и code.

Answer 1

Пожалуйста, загрузите ваш стиль после начальной загрузки, а также используйте родительский класс или элемент для переопределения начальной загрузки CSS. вы можете использовать родительский класс вместо тела.

body pre code { color: red; }

Answer 2

Добавьте !important к своим свойствам, чтобы получить более высокий приоритет.

pre code {
    color: #383e3c !important;
}

Или вы можете задать элемент id - code и сбросить переопределение, которое pre вызывает, переписаватрибуты:

pre code#id {
  color: #e83e8c;
}

И используйте таблицы стилей вот так:

<link href="/bootstrap.css" rel="stylesheet">
<link href="/style.css" rel="stylesheet">