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

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

146 голосов
/ 27 февраля 2012

В заголовке 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? Это означает, что отображается последняя строка?

Ответы [ 9 ]

151 голосов
/ 27 февраля 2012

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

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

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

29 голосов
/ 27 февраля 2012

Применяется самый специфический стиль: 

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"]) более конкретен, поэтому используются его стили.

23 голосов
/ 02 июля 2013

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

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


<style>
    .test{
        color:blue;
    }

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

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

15 голосов
/ 09 января 2016

Последняя загрузка CSS - это MASTER, которая переопределит все 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 будет иметь размер шрифта: 30px;

7 голосов
/ 13 июля 2015

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

  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: последние события в вашем городе, фиолетовый: раздел местной рекламы Хьюстона, черный: следующий раздел

enter image description here

6 голосов
/ 27 февраля 2012

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

1 голос
/ 23 января 2018

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

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

<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, будут перезаписаны.

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

0 голосов
/ 30 ноября 2016

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

0 голосов
/ 14 января 2016

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

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

...