Переопределить свойство множественных классов CSS
Если у меня есть класс стиля, определенный как таковой:
.myclass{
//bunch of other stuff
float:left;
}
и я определяю другой класс следующим образом:
.myclass-right{
float:right;
}
и я определяю div следующим образом:
<div class="myclass myclass-right"></div>
Будет ли этот div наследовать все от myclass, но переопределить свойство float для float: правильно? Это то, что я ожидаю. Также вы хотите узнать, имеет ли это какие-либо последствия для кросс-браузера (хорошие браузеры против IE 7 или выше, f *** IE6).
Ответы
Ответ 1
Пока селектора имеют одинаковую специфичность (в этом случае они это делают) и .myclass-right
блок стиля определяется после .myclass
, да.
Изменить развернуть: порядок, который классы отображаются в элементе html, не имеет никакого эффекта, единственное, что имеет значение, - это специфика селектора и порядок, в котором селектора отображаются в таблице стилей.
Ответ 2
Использование !important
- это один из способов сделать это.
.myclass-right{
float:right !important;
}
Кроме того, если вы более конкретны с вашим селектором, он также должен переопределить
div.myclass-right{
float:right;
}
Ответ 3
Просто хотел выбрасывать еще один вариант в дополнение к важному, а также порядку определения стиля: вы можете также сцепить их вместе:
.myclass.myclass-right{float:right;}
.myclass{float:left;}
Ответ 4
Пока myclass-right
объявляется после вашего другого класса в вашем файле css, он будет работать.
Ответ 5
В случае конфликта CSS-атрибутов приоритет будет иметь тег CSS, который приходит после другого в таблице стилей.
Другими словами - если вы хотите, чтобы какой-либо класс когда-либо переопределял другие, просто поместите его в конец вашего файла css.