0

Интересует по какому правилу применяются классы

.red{color:red;}
.green{color:green;}

Если в элемент в аттрибут class дать

<div class="red green">текст</div>

текст будет зеленым

А если дать

<div class="green red">текст</div>

Тогда текст будет по-прежнему зеленый

Почему так?

2 ответа 2

6

Вы сами уже и ответили: в данном случае важен порядок определения классов в файле со стилями, а не в списке классов элемента.

3

У каждого правила в CSS есть свой вес, который складывается из весов селекторов. Например правило через ID эелемента #red {color:...} будет иметь больший вес, чем через класс .red {color:...}. Так же учитывается кол-во селекторов в написании правила.

Например если в вашем примере написать CSS вот так, то применится красный цвет:

div.red { color:red; }
.green { color:green; }

Более подробно можно (и нужно) почитать здесь – https://habrahabr.ru/post/137588/

Если вес применяемых правил одинаковый, то приоритет отдается последнему загруженному правилу (и не только в рамках 1 файла), а не очередность написания в атрибуте class.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.