Каков порядок приоритета CSS?

Ответ 1

Есть несколько правил (применяются в этом порядке):

1. встроенный CSS (атрибут стиля HTML) переопределяет правила CSS в теге стиля и файле CSS
2. более конкретный селектор имеет приоритет над менее специфичным
3. правила, которые появляются позже в коде, переопределяют более ранние правила, если оба имеют одинаковую специфику.
4. Правило css с !important всегда имеет приоритет.

В вашем случае это правило 3, которое применяется.

Специфичность для отдельных селекторов от высшего к низшему:

• идентификаторы (пример: #main <div id="main">)
• классы (например, .myclass), селекторы атрибутов (например, [href=^https:]) и псевдоклассы (например,: :hover)
• элементы (напр.: div) и псевдоэлементы (напр.: ::before)

Чтобы сравнить специфичность двух комбинированных селекторов, сравните количество вхождений отдельных селекторов в каждой из указанных выше групп специфичности.

Пример: сравните #nav ul li a:hover с #nav ul li.active a::after

• посчитать количество селекторов идентификаторов: есть один для каждого (#nav)
• посчитать количество селекторов класса: есть один для каждого (:hover и .active)
• Подсчитайте количество селекторов элементов: для первого есть 3 (ul li a), для второго - 4 (ul li a ::after), поэтому второй комбинированный селектор более специфичен.

Хорошая статья о специфике селектора CSS.

Ответ 2

Вот компиляция порядка стилей CSS в диаграмме, в которой правила CSS имеют более высокий приоритет и имеют приоритет над остальными:

Отказ от ответственности: мы с моей командой разработали эту часть вместе с сообщением в блоге (https://vecta.io/blog/definitive-guide-to-css-styling-order), которое, я думаю, пригодится всем разработчикам внешнего интерфейса.

Ответ 3

Прежде всего, на основе вашей директивы @extend, кажется, вы не используете чистый CSS, а препроцессор, такой как SASS os Stylus.

Теперь, когда мы говорим о "порядке приоритетности" в CSS, применяется общее правило: любые правила, установленные после, применяются другие правила (сверху вниз). В вашем случае, просто указав .smallbox после .smallbox-paysummary, вы сможете изменить приоритет своих правил.

Однако, если вы хотите пойти немного дальше, я предлагаю следующее: CSS каскадная спецификация W3C. Вы увидите, что приоритет правила основан на:

• Текущий тип носителя;
• Значение
• Происхождение;
• Специфика селектора и, наконец, наше известное правило:
• Какой из них указан последним.

Ответ 4

AS - состояние в W3: W3 Каскадный CSS

орден, который применяется в другой таблице стилей, следующий (цитата из каскадного раздела W3):

• объявления пользовательских агентов

• пользовательские декларации пользователя

• авторские декларации

• авторские важные декларации

• важные объявления пользователя

Дополнительная информация об этом в документе W3, указанном в документе

Ответ 5

Element, Pseudo Element: d = 1 – (0,0,0,1)
Class, Pseudo class, Attribute: c = 1 – (0,0,1,0)
Id: b = 1 – (0,1,0,0)
Inline Style: a = 1 – (1,0,0,0)

Inline css (атрибут стиля html) переопределяет правила CSS в теге стиля и файле css

Более конкретный селектор имеет приоритет над менее конкретным.

Правила, которые появляются позже в коде, переопределяют предыдущие правила, если обе имеют одинаковую специфичность.

Ответ 6

Порядок, в котором классы отображаются в элементе html, не имеет значения, что считается порядком, в котором блоки отображаются в таблице стилей.

В вашем случае .smallbox-paysummary определяется после .smallbox, следовательно, приоритет 10px.

Ответ 7

То, на что мы смотрим, называется специфичностью, как утверждает Mozilla:

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

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

Мне нравится объяснение 0-0-0 на https://specifishity.com:

Довольно описательная картина директивы !important! Но иногда это единственный способ переопределить встроенный атрибут style. Так что это лучшая практика, пытаясь избежать обоих.

Ответ 8

Также важно отметить, что когда у вас есть два стиля в элементе HTML с одинаковым приоритетом, браузер будет отдавать приоритет стилям, которые были записаны в DOM последними... так что если в DOM:

<html>
<head>
<style>.container-ext { width: 100%; }</style>
<style>.container { width: 50px; }</style>
</head>
<body>
<div class="container container-ext">Hello World</div>
</body>

... ширина div будет 50px