Как ведет себя атрибут style в процессе рендеринга страницы?

Прочитав подобные статьи о процессе рендеринга CSS, я в некоторой степени это понял. В чем я не уверен, так это в том, как обрабатывается атрибут style в узле HTML.

Скажем, у вас есть страница, подобная следующей:

<html>
    <head>
       <link rel="stylesheet" type="text/css" href="someArbitraryStyling.css">
    </head>
    <body>
        <div style="color:red;">Hello world!</div>
    </body>
</html>

В какой момент выполняется атрибут style ? Это до или после внешней таблицы стилей?

Всего 1 ответ


Это не «когда», это делает то, что перекрывает что-то еще. Тем не менее, вы можете думать об этом как о прочитанном сверху вниз. Второй дублирующий селектор переопределит первый, а встроенный стиль переопределит предыдущий селектор. Предполагая, что у вас есть стили, указанные в заголовке, встроенный CSS будет линейно «после» блока стиля.

Однако техническая вещь, о которой вы должны прочитать, это специфичность CSS. Вот как браузер определяет «что выигрывает», когда есть несколько одинаковых селекторов.

В этом случае inline стиль перезаписывает связанную таблицу стилей из-за правил специфичности CSS

Вот документация Mozilla о специфике.


Обновление: Следует отметить, что браузер всегда следит за «новым» CSS, поэтому, если вы добавите что-то на страницу, он будет считать, что «нижнее» большинство определений.


Есть идеи?

10000