В каком порядке таблицы стилей 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

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

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

Вот код 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. Transition декларации
2. Объявления агента пользователя, отмеченные !important
3. Пользовательские объявления отмечены !important
4. Авторские объявления страницы отмечены !important
  1. Определения для элемента с styleатрибутом
  2. Определения для всего документа
5. Animation декларации
6. Страница авторских деклараций
  1. Определения для элемента с styleатрибутом
  2. Определения для всего документа
7. Пользовательские объявления
8. Объявления агента пользователя
Если два объявления имеют одинаковое происхождение и важность, в игру вступает конкретность , то есть то, насколько четко определен элемент, вычисляя оценку.
- 100 баллов за каждый идентификатор ( #x34y)
- 10 баллов за каждый класс ( .level)
- 1 балл за каждый тип элемента ( li)
- 1 балл за каждый псевдоэлемент ( :hover), исключая:not
Например, селектор main li + .red.red:not(:active) p > *имеет специфику 24.
Порядок появления только играет роль , если два определения имеет одинаковое происхождение, значение и специфику. Более поздние определения предшествуют более ранним определениям в документе (включая импорт).

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

0

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

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

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

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

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

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