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

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

Ответы

Ответ 1

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

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

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

Ответ 2

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

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

Ответ 3

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

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


<style>
    .test{
        color:blue;
    }

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

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

Ответ 4

Последний загружающий 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 будет размером шрифта: 30px;

Ответ 5

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

Ответ 6

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

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

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

Ответ 7

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

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

Ответ 8

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