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

Я пытаюсь понять, почему один из моих классов css, кажется, переопределяет другой (а не наоборот)

Здесь у меня есть два класса css

.smallbox { 
    background-color: white;
    height: 75px;
    width: 150px;
    font-size:20px;
    box-shadow: 0 0 10px #ccc;
    font-family: inherit;
}

.smallbox-paysummary {
    @extend .smallbox; 
    font-size:10px;
}

и на мой взгляд я звоню

<pre class = "span12 pre-scrollable smallbox-paysummary smallbox "> 

Шрифт (перекрывающийся элемент) отображается как 10 пикселей вместо 20 - может ли кто-нибудь объяснить, почему это так?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. Текущий тип носителя;
2. Важность;
3. Происхождение;
4. Специфика селектора и, наконец, наше известное правило:
5. Какой последний указан.

AS - состояние в W3: W3 Cascade CSS

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

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

2. обычные объявления пользователя

3. автор нормальных деклараций

4. важные заявления автора

5. важные заявления для пользователей

Более подробная информация об этом представлена ​​в упомянутом документе W3.

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

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

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)

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

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

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

Также важно отметить, что когда у вас есть два стиля в элементе 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 будет 50 пикселей