Различные уровни CSS и приоритет друг над другом - PullRequest
Новая
       22

Различные уровни CSS и приоритет друг над другом

8 голосов
/ 18 февраля 2011

Я читал приличную статью здесь на эту тему: http://www.plus2net.com/html_tutorial/css-types.php Она вышла на первое место в рейтинге Google по приоритетам поисковой таблицы CSS.Однако я думаю, что сайт дезинформирует вас и является неполным!Может ли кто-нибудь подтвердить мои подозрения?

1) Стиль, определяемый пользователем, является вторым по приоритету.Чтобы переопределить другие стили с ним, вам нужно использовать! Important, чтобы переместить его на самый высокий уровень.2) В нем не упоминаются относительные приоритеты по сравнению с @import и @import в пределах

Более точный порядок будет (1 победа над 2 и т. Д.):

  1. Определяется пользователем (настройки браузера! Важно - [не Google Chrome!])
  2. Встроенная таблица стилей (атрибут стиля в узле HTML)
  3. Внутренняя таблица стилей (
  4. Внешняя таблица стилей (@import)
  5. Внешняя таблица стилей ()
  6. Внешняя таблица стилей (@import inside )
  7. Определяемый пользователем - (настройки браузера - [не Google Chrome!])
  8. По умолчанию в браузере - (поставляется с браузером)

Майкл Боуэрс Шаблоны дизайна CSS и HTML Pro хороший источник для этого тоже.Но в нем не упоминается inline.

Чего-то еще не хватает?

PS: я понял, важно пропустить 2-8.Таким образом, определенный пользователем появляется дважды.Один раз с важным, второй раз без него.Таким образом, пользовательский по сути второй по важности.Важно, что вы можете применять на любом уровне.

1 Ответ

7 голосов
/ 18 февраля 2011

Вместо того, чтобы думать об этом с точки зрения самого важного и наименее важного, думайте о нем как о каскадном порядке. Все стили применяются, но последний примененный - тот, который вы видите. Стили применяются в следующем порядке:

  1. Браузер по умолчанию
  2. Внешняя таблица стилей (link или @import)
  3. Внутренняя таблица стилей
  4. Встроенный стиль

Внутри любого из первых трех стили применяются от наименее специфического к наиболее специфическому (затем сверху вниз, если наиболее конкретное не может быть определено). Таким образом, выбранный тегом стиль будет применен перед выбранным классом стилем, поэтому, если они не согласны с тем, какой стиль следует применить, выбранный классом победит. Не существует правила о том, следует ли сначала применять link или @import, поэтому они смешиваются друг с другом и применяется правило от наименьшего к наиболее конкретному.

!important позволяет применять менее специфичный стиль после более специфического, а внешний стиль таблицы стилей применяется после внутреннего или встроенного стиля. Я бы посоветовал не использовать !important везде, где это возможно, поскольку это может привести к довольно запутанным результатам.

...