Превосходящий эффект одного CSS, применяя еще один CSS

Question

У меня есть 2 класса CSS, .c1 и .c2, .c1 применяет padding-top от x и .c2 от y, теперь я хочу .c1, чтобы переопределить padding-top значение, примененное .c2.Как мне это сделать?Я не могу изменить .c2, поэтому мне нужно .c1 переопределить некоторые значения свойств, примененные .c2.

Answer 1

Вы можете переместить правило .c1 ниже .c2:

.c2 { padding-top: 1em; }
.c1 { padding-top: 0.5em; }

или если ваш элемент имеет оба класса, примените стиль к другому селектору с помощью оба класса .c2.c1:

.c1 { padding-top: 0.5em; }
.c2 { padding-top: 1em; }
.c2.c1 { padding-top: 0.5em; }

Если вы не можете переместить правила и не можете стилизовать несколько классов, последнее средство использует !important:

.c1 { padding-top: 0.5em !important; }
.c2 { padding-top: 1em; }

Answer 2

Посмотрите на эту статью, о приоритете CSS. Возможно, это поможет вам http://hungred.com/useful-information/css-priority-order-tips-tricks/

Answer 3

вы можете изменить специфичность селектора, который включает c1, или если вы не хотите его менять, и то же самое, чтобы переместить его ниже c2 или, в худшем случае , добавить !important для свойства.

Демонстрация специфичности: http://jsfiddle.net/ADBAf/

div span.c1 {color:blue}
.c2 {color:red}

! Важный демо: http://jsfiddle.net/ADBAf/1/

.c1 {color:blue !important}
.c2 {color:red}

Answer 4

Вы должны применить «Важно» в вашем CSS, чтобы сделать это

вот так: - .c1 {padding-top: 5! важный; } .c2 {padding-top: 7; }

Answer 5

Если у вас нет контроля над размещением правил, просто сделайте

.c1 { padding-top: 10px !important }

В противном случае достаточно поставить правило .c1 под .c2 (если последнее не является более конкретным).

Answer 6

Одним из способов является использование !important

.c2{
  background-color:white;
}
.c1{
  background-color:green !important;
}

Будет применяться цвет c1