CSS Специфічність
Що таке специфічність?
Визначення
Специфічність - це спосіб, за допомогою якого браузери визначають, які значення CSS-властивостей найбільше відповідають елементу і, як наслідок, будуть застосовані. Специфічність заснована на правилах відповідності, що складаються із CSS-селекторів різних типів.
Якщо є два або більше суперечливих (такі, що конфліктують) правила CSS, що вказують на один і той самий елемент, браузер слідує деяким правилам, щоб визначити, яке із них найбільш конкретне, і тому перемагає.
Специфічність можна розглядати як оцінку/рейтинг, що визначає, які оголошення стилю в остаточному результаті застосовуються до елемента.
Універсальний селектор (*) має низьку специфічність, в той час, як селектори ID дуже специфічні!
Примітка: Специфічність - це часта причина, із-за якої ваші правила CSS не застосовуються до деяких елементів, хоча ви вважаєте, що вони мають застосовуватись.
Ієрархія специфічності
Кожен селектор має своє місце в ієрархії специфічності. Є чотири категорії, які визначають рівень специфічності селектора:
Вбудовані стилі - Вбудований стиль прикріплюється безпосередньо до стилізованого елементу. Приклад: <h1 style="color: #fff;">.
IDs - ID - це унікальний ідентифікатор для елементів сторінки, наприклад #navbar.
Класи, атрибути та псевдокласи - В цю категорію входять .classes, [attributes] і псевдокласи, такі як: hover, :focus і т.д.
Елементи та псевдоелементи - В цю категорію входять імена елементів та псевдоелементи, такі як h1, div, :before та :after.
Як розрахувати специфічність?
Запам’ятайте, як розрахувати специфічність!
Почніть з 0, додайте 1000 для атрибута стиля, додайте 100 для кожного ідентифікатора, додайте 10 для кожного атрибута, класу чи псевдокласу, додайте 1 для кожного імені елемента або псевдоелемента.
Розглянемо ці три фрагменти коду:
Приклад
A: h1
B: #content h1
C: <div id="content"><h1 style="color: #fff">Heading</h1></div>
Специфічність A дорівнює 1 (один елемент)
Специфічність B дорівнює 101 (одне посилання ID та один елемент)
Специфічність C дорівнює 1000 (вбудований стиль)
Оскільки 1 < 101 < 1000 третє правило (C) має більш високий рівень специфічності і тому буде застосовуватись.
Правила специфічності
Рівна специфічність: враховується останнє правило - якщо одні і те ж правило двічі записано в зовнішню таблицю стилів, то нижнє правило в таблиці стилів ближче до елементу, який потрібно стилізувати, і тому буде застосовуватись:
Останнє правило застосовується завжди.
Селектори ідентифікаторів мають більш високу специфічність, аніж селектори атрибутів. Зверніть увагу на наступні три рядки коду:
Приклад
div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}
Спробуйте самі »
Перше правило більш конкретне, ніж два інших, і буде застосовуватись.
Контекстні селектори більш специфічні, ніж селектор одного елемента - вбудована таблиця стилів ближче до елемента, який необхідно стилізувати. Як в наступній ситуації:
Приклад
Із зовнішнього CSS файлу:
#content h1 {background-color: red;}
В HTML файлі:
<style>
#content h1 {
background-color: yellow;
}
</style>
Останнє правило буде застосовуватись.
Селектор класу переважає будь-яку кількість селекторів елементів - селектор класу, такий як .intro, переважає h1, p, div і т.д.:
Універсальний селектор та успадковані значення мають специфічність 0 - *, body * та подібні мають нульову специфічність. Успадковані значення також мають специфічність 0.
