У меня есть файл HTML, как показано ниже:

<!DOCTYPE html>
<html>
    <head>
        <style>
        .social { color: red; border: 1px solid blue; display: inline-block;}
        .first { color: green; }
        </style>
    </head>
    <body>
        <p class="social">taco</p>
        <p class="first">burrito</p>
        <p class="first social">chimichanga</p>
    </body>
</html>

В третьем абзаце я использую классы «первый» и «социальный». Однако цвет 3-го абзаца всегда зеленый («первый»), независимо от того, поставил ли я «первый» перед словом «социальный» или после.

Итак, как браузер определяет стиль css, когда к одному элементу применяется несколько классов стилей?

css
4
injoy 14 Май 2016 в 09:56

2 ответа

Лучший ответ

Из спецификаций CSS2.1:

Наконец, сортировка по указанному порядку: если два объявления имеют одинаковый вес, происхождение и специфику, последнее указанное выигрывает.

В вашем случае класс first появляется после класса social во внутренней таблице стилей. Поскольку оба имеют одинаковый вес, происхождение и специфичность, преобладает стиль перекрытия правила first (то есть свойство цвета).

4
timolawl 14 Май 2016 в 07:10

Он зеленый просто потому, что класс .first является последним в порядке селекторов CSS, которые применялись для этого элемента. Если вы поменяете их местами, он станет красным. (.social после .first)

Порядок ссылок в атрибуте класса не имеет никакого значения.

Здесь довольно давно и давно, но полезно прочитать о том, как работают браузеры и особенно о том, как работают вычисления css.

3
dmi3y 14 Май 2016 в 07:44