@av_tyschenko

CSS как изменить приоритет воздействия классов?

У меня вопрос к продвинутым пользователям)

<div class="color-scheme-1">
  <div class="color-scheme-2">
     <p>Lorem Ipsum Dolor Sit Amet, Consectetur Adipiscing Elit. Aecenas Ac Augue At Erat Hendrerit Dictum. Praesent Porta, Purus Eget Sagittis.</p>
  </div>
</div>

.color-scheme-2 p {
  color: blue;   
}
.color-scheme-1 p {
  color: red;   
}

jsfiddle.net/17g60t0q - для наглядности

Нужно как то нейтрализовать класс color-scheme-1, что бы класс color-scheme-2 красил в голубой.

Пример очень очень упрощен, поэтому простого ' > ' в моем случае не поможет, пример написал для упрощения понимания.

Если есть какой то способ решить вопрос через JQ или добавления еще какого то класса для приоритета, любые решения буду рассматривать.
  • Вопрос задан
  • 898 просмотров
Пригласить эксперта
Ответы на вопрос 3
@dm_ober
Поменять местами объявление стилей, применится последний
.color-scheme-1 p {}
.color-scheme-2 p {}
Ответ написан
@everliving
.color-scheme-1 .color-scheme-2 p {
  color: blue;   
}


Читай про Каскады
Ответ написан
kashamalasha
@kashamalasha
.color-scheme-2 p {
  color: blue !important;   
}
.color-scheme-1 p {
  color: red;   
}


Либо можно прямо в inline стиль к параграфу цвет вписать, если это "точечный удар".
Но некоторые сочтут это грязными приемчиками.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы