Який порядок пріоритетності для 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. inline css (атрибут стилю html) замінює правила css у тезі стилю та файлі css
2. більш конкретний селектор має перевагу над менш конкретним
3. правила, які з'являються пізніше в коді, замінюють попередні правила, якщо обидва мають однакову специфіку.
4. Правило css з !importantзавжди має перевагу.

У вашому випадку діє його правило 3.

Специфіка для одиночних селекторів від найвищого до нижнього:

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

Для порівняння специфічності двох комбінованих селекторів порівняйте кількість випадків виникнення поодиноких селекторів кожної з груп специфічності вище.

Приклад: порівняйте #nav ul li a:hoverз#nav ul li.active a::after

• підраховувати кількість селекторів ідентифікаторів: є один для кожного (#nav )
• підрахувати кількість селекторів класів: для кожного є ( :hoverі.active )
• підрахуйте кількість селекторів елементів: ul li aдля першого є 3 ( ) і 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атрибут inline . Тож найкраща практика намагається уникати обох.

Перш за все, виходячи з ваших @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цього 10px пріоритет.

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 style) замінює правила 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 буде 50px