В каком порядке таблицы стилей CSS переопределяются?

157

В заголовке HTML я получил это:

<head>
<title>Title</title>
<link href="styles.css" rel="stylesheet" type="text/css"/>
<link href="master.css" rel="stylesheet" type="text/css"/>

styles.cssмой лист для конкретной страницы. master.cssэто лист, который я использую в каждом из моих проектов, чтобы переопределить настройки браузера по умолчанию. Какой из этих стилей имеет приоритет? Пример: первый лист содержит конкретные

body { margin:10px; }

И связанные границы, но второй содержит мои сбросы 

html, body:not(input="button") {
    margin: 0px;
    padding: 0px;
    border: 0px;
}

По сути, работает ли каскадный элемент CSS с точки зрения ссылок на таблицы стилей так же, как в типичных функциях CSS? Это означает, что отображается последняя строка?

css overriding stylesheet ian5v
источник
Я только сейчас понял, что это будет лучше подходит для веб-мастеров. Будет ли лучшее место, чтобы опубликовать это?
ian5v
10
Прямо здесь хорошо.
Блендер
4
body:not(input="button")кстати, не является допустимым селектором. Вы, вероятно, хотели разделить это на body, input:not([type="button"]).
BoltClock
Это интересно. Я не верю, что видел такой синтаксис раньше. Я все еще новичок, но эти двойные скобки чужды мне.
ian5v
эти скобки предназначены для селекторов атрибутов: developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors @topic: возможно, вы хотите изменить порядок таблиц стилей: master.cssсначала следует загрузить общий код , затем его проще отменить мастер-стили в вашем styles.css.
решительно

Ответы:

163

Правила каскадного правила CSS сложны - вместо того, чтобы пытаться их перефразировать, я просто отсылаю вас к спецификации:

http://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#cascade

Вкратце: более конкретные правила имеют приоритет перед более общими. Специфичность определяется на основе количества идентификаторов, классов и имен элементов, а также от того, !importantбыло ли использовано объявление. Когда существует несколько правил одного и того же «уровня специфичности», какое бы из них ни появилось, последние выигрывают.

сумеречный
источник
1
Тогда нет конкретного правила относительно того, в каком порядке загружаются таблицы стилей? Я понимаю, как CSS отображается с точки зрения специфичности, но потом я предполагаю, что мой основной лист будет загружен, если не будет переопределен.
ian5v
11
На самом деле, !importantнепосредственно участвует в каскаде и не имеет ничего общего со спецификой. Специфика связана с селекторами, тогда !importantкак используется с объявлениями свойств. (Таким образом, вы правы, говоря, что правила сложны!;)
BoltClock
2
Так загружаются ли таблицы стилей так же, как элементы, причем последний имеет приоритет, если они имеют одинаковую специфику?
ian5v
3
@iananananan: По сути, браузер никогда не видит CSS с точки зрения отдельных таблиц стилей. Если существует несколько таблиц стилей, все они обрабатываются так, как если бы они были одной гигантской таблицей стилей, и правила оцениваются соответствующим образом.
BoltClock
2
@ user34660 Комментарий BoltClock с точки зрения стиля CSS. Вы правы в том, что таблицы стилей хранятся отдельно в DOM, но это разделение не влияет на то, как эти стили применяются к чему-либо.
duskwuff -неактивный-
31

Наиболее специфический стиль применяется:

div#foo {
  color: blue; /* This one is applied to <div id="foo"></div> */
}

div {
  color: red;
}

Если все селекторы имеют одинаковую специфичность, то используется самое последнее объявление:

div {
  color: red;
}

div {
  color: blue; /* This one is applied to <div id="foo"></div> */
}

В вашем случае, body:not([input="button"])более конкретно, поэтому используются его стили.

смеситель
источник
1
Смотрите мой комментарий на вопрос, касающийся этого последнего селектора.
BoltClock
1
Правило специфичности усложняет ситуацию, когда нам нужно переопределить не редактируемую таблицу стилей!
Ари
23

Порядок имеет значение. Последнее объявленное значение множественного вхождения будет принято. Пожалуйста, посмотрите тот же, который я разработал: http://jsfiddle.net/Wtk67/

<div class="test">Hello World!!</div>


<style>
    .test{
        color:blue;
    }

    .test{
        color:red;
    }
</style>

Если вы поменяете местами порядок .test{}, то вы увидите, что HTML принимает значение последнего, объявленного в CSS

Рой МДж
источник
3
Таким образом, вы должны добавить наиболее конкретный последний CSS.
live-love
17

Последняя загрузка CSS - это МАСТЕР, который переопределит все CSS с теми же настройками CSS

Пример:

<head>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/master.css">
</head>

reset.css

h1 {
    font-size: 20px;
}

master.css

h1 {
    font-size: 30px;
}

Вывод для тега h1 будет иметь размер шрифта: 30 пикселей;

Doodl
источник
1
Здравствуй. В моем случае первое определенное .cssзагружается последним. Применяются ли они в порядке их загрузки или в порядке их определения?
Евгений Коньков
Спасибо, это именно то объяснение, которое я искал.
HunterTheGatherer
7

Попробуем упростить правило каскадирования на примере. Правила идут более конкретно к общему.

  1. Применяет правило первого идентификатора (над классом и / или элементами независимо от порядка)
  2. Применяет классы к элементам независимо от порядка
  3. Если нет класса или идентификатора, применяются общие
  4. Применяет последний стиль в порядке (порядок объявления на основе порядка загрузки файлов) для той же группы / уровня.

Вот код CSS и HTML;

<style>
    h2{
        color:darkblue;
    }
    #important{
        color:darkgreen;
    }
    .headline {
        color:red;
    }
    article {
        color:black;
        font-style:italic;
    }
    aside h2 {
        font-style:italic;
        color:darkorange;
    }
    article h2 {
        font-style: normal;
        color: purple;
    }
</style>

Вот стиль CSS

<body>
<section>
    <div>
        <h2>Houston Chronicle News</h2>
        <article>
            <h2 class="headline" id="important">Latest Developments in your city</h2>
            <aside>
                <h2>Houston Local Advertisement Section</h2>
            </aside>
        </article>
    </div>

    <p>Next section</p>
</section>

Вот результат. Независимо от порядка файлов стиля или объявления стиля, id="important"применяется в конце (обратите внимание на class="deadline"объявленный последний, но не имеет никакого эффекта).

<article>Элемент содержит <aside>элемент, однако последний объявил стиль вступит в силу, в этом случае article h2 { .. } на третий элемент h2.

Вот результат для IE11: (Недостаточно прав для публикации изображения) DarkBlue: Houston Chronicle News, DarkGreen: последние события в вашем городе, Фиолетовый: Раздел местной рекламы Хьюстона, Черный: Следующий раздел

введите описание изображения здесь

Каган Агун
источник
6

Это зависит как от порядка загрузки, так и от специфики фактических правил, применяемых к каждому стилю. Учитывая контекст вашего вопроса, вы хотите сначала загрузить общий сброс, а затем страницу. Затем, если вы все еще не видите ожидаемого эффекта, вам нужно изучить специфику используемых селекторов, как уже указывали другие.

prodigitalson
источник
2

РЕДАКТИРОВАТЬ: апрель 2020 года, согласно комментарию @ LeeC, это уже не так

Да, это работает так же, как если бы они были на одном листе, однако:

Загрузка заказов имеет значение!

<link href="styles.css" rel="stylesheet" type="text/css"/>
<link href="master.css" rel="stylesheet" type="text/css"/>

В приведенном выше коде нет гарантии, что master.cssзагрузится после styles.css. Поэтому, если master.cssон загружен быстро и styles.cssзанимает некоторое время, styles.cssон станет второй таблицей стилей, и любые правила с той же спецификацией master.cssбудут перезаписаны.

Лучше всего сложить все свои правила на одном листе (и минимизировать) перед развертыванием.

Ник
источник
Рассмотрим случай использования альтернативных почти идентичных таблиц стилей, загружаемых из раздела <head> страницы, содержащих условные атрибуты мультимедиа для загрузки таблицы стилей, характерной для смартфонов и планшетов. В этом случае логика, указанная на носителе, должна быть строго исключающей для каждой таблицы стилей, если порядок загрузки не определен.
Линдсей Хейсли
@n_i_c_k Ваш ответ неверный. Порядок декларации имеет значение, а не порядок загрузки . Я только что проверил это с Fiddler, остановив загрузку master.cssи дав styles.cssзагрузку полностью. Затем я позволю master.cssзагрузить. Стиль «перекрытия» master.cssвсе еще применяется - и рендеринг блокировался до master.cssзагрузки и был проанализирован. Примечание : я попробовал rel=preloadна master.css' (no halting) and that apparently alters its _declaration_ order by hoisting it above styles.css`.
LeeC
Спасибо @LeeC, я знаю, что на момент написания мой ответ был правильным, но я верю вашему слову, что он исправлен, и отредактирую свой ответ.
n_i_c_k
1

Лучший способ - максимально использовать классы. В любом случае избегайте селекторов идентификаторов (#). Когда вы пишете селекторы только с одним классом, наследование CSS становится намного проще.

Обновление: узнайте больше о специфике CSS в этой статье: https://css-tricks.com/specifics-on-css-specificity/

Йерун Оомс
источник
1
Это отличная статья о специфике CSS: css-tricks.com/specifics-on-css-specificity
Jeroen
0

Из вашего вопроса я подозреваю, что у вас есть дубликаты выбора, основной набор, который распространяется на все страницы, и более конкретный набор, который вы хотите переопределить основные значения для каждой отдельной страницы. Если это так, то ваш заказ правильный. Мастер загружается первым, и правила в последующем файле будут иметь приоритет (если они идентичны или имеют одинаковый вес). На этом веб-сайте настоятельно рекомендуется ознакомиться со всеми правилами http://vanseodesign.com/css/css-specificity-inheritance-cascaade/. Когда я начал разработку внешнего интерфейса, эта страница прояснила множество вопросов.

user3094826
источник
0

Это каскад, который определяет приоритет объявлений. Я могу рекомендовать официальную спецификацию; эта часть хорошо читается.

https://www.w3.org/TR/css-cascade-3/#cascading

Следующие элементы влияют на сортировку в порядке убывания приоритета.

  1. Сочетание происхождения и важности:

    1. Transition декларации
    2. Объявления агента пользователя, отмеченные !important
    3. Пользовательские объявления отмечены !important
    4. Авторские объявления страницы отмечены !important
      1. Определения для элемента с styleатрибутом
      2. Определения для всего документа
    5. Animation декларации
    6. Страница авторских деклараций
      1. Определения для элемента с styleатрибутом
      2. Определения для всего документа
    7. Пользовательские объявления
    8. Объявления агента пользователя

  2. Если два объявления имеют одинаковое происхождение и важность, в игру вступает конкретность , то есть то, насколько четко определен элемент, вычисляя оценку.

    • 100 баллов за каждый идентификатор ( #x34y)
    • 10 баллов за каждый класс ( .level)
    • 1 балл за каждый тип элемента ( li)
    • 1 балл за каждый псевдоэлемент ( :hover), исключая:not

    Например, селектор main li + .red.red:not(:active) p > *имеет специфику 24.

  3. Порядок появления только играет роль , если два определения имеет одинаковое происхождение, значение и специфику. Более поздние определения предшествуют более ранним определениям в документе (включая импорт).

Майкл Шмид
источник
0

Я полагаю, что при выполнении кода он читается сверху вниз, что означает, что последняя ссылка CSS будет переопределять аналогичные стили в любых таблицах стилей над ней.

Например, если вы создали две таблицы стилей 

<link rel="stylesheet" href="style1.css"> 
<link rel="stylesheet" href="style2.css">

и в обоих из них вы устанавливаете цвет фона тела на два разных цвета - цвет тела в style2.css будет иметь приоритет.

Вы можете избежать проблемы приоритета стиля, используя !IMPORTANTстиль класса, который вы хотите использовать в качестве приоритета, или, возможно, переупорядочив свой <link>заказ.

Эннам Хок
источник