У якому порядку перекривають таблиці стилів 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як використовується з деклараціями властивостей. (Отже, ти маєш рацію сказати, що правила складні

— !;

2

Чи завантажуються таблиці стилів так само, як елементи, останні мають перевагу, якщо вони мають однакову специфіку?

— ian5v

3

@iananananan: В основному браузер ніколи не бачить CSS з точки зору окремих таблиць стилів. Якщо існує декілька таблиць стилів, до них відносяться як до одного гігантського таблиці стилів, і правила оцінюються відповідно.

— BoltClock

2

@ user34660 Коментар BoltClock з точки зору стилів CSS. Ви правильні, що таблиці стилів зберігаються окремими в DOM, але це розділення не впливає на те, як ці стилі застосовуються до чого-небудь.

— duskwuff -inactive-

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

— Roy MJ
джерело

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 буде розміром шрифту: 30px;

— Doodl
джерело

1

Привіт. У моєму випадку перший визначений .cssзавантажується останнім. Чи застосовуються вони для того, щоб бути завантаженими або для того, щоб вони визначені?

— Євген Конков

Дякую, саме таке пояснення я шукав.

— HunterTheGatherer

7

Давайте спробуємо спростити каскадне правило на прикладі. Правила виходять більш конкретними до загальних.

Застосовує правило першого ідентифікатора (над класом та / або елементами незалежно від порядку)
Застосовує класи над елементами незалежно від порядку
Якщо немає класу чи 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: Останні розробки у вашому місті, Фіолетовий: Розділ місцевої реклами в Х'юстоні, чорний: Наступний розділ

— Каган Агун
джерело

6

Це залежить як від порядку завантаження, так і від специфіки фактичних правил, застосованих до кожного стилю. З огляду на контекст вашого питання, ви хочете спочатку завантажити загальне скидання, а потім конкретну сторінку. Тоді, якщо ви все ще не бачите запланованого ефекту, вам слід вивчити специфіку залучених селекторів, як уже вказували інші.

— продигіталій
джерело

2

EDIT: квітень 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, будуть перезаписані.

Найкраще розмістити всі свої правила на одному аркуші (і мінімізувати) перед розгортанням.

— n_i_c_k
джерело

Розглянемо випадок для альтернативних таблиць стилів, майже ідентичних стилів, завантажених із розділу <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/

— Jeroen Ooms
джерело

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>замовлення.

— Еннам Хоке
джерело