Переопределить свойство множественных классов 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.