У цьому розділі:
спадкування
При вказівці стилю для елемента частина властивостей може бути успадкована його дочірніми елементами і нащадками, цей ефект називається спадкуванням.
Наприклад, всі елементи, розташовані всередині елемента
. є його дочірніми елементами і нащадками. Якщо в стилі для задати за допомогою CSS властивості color червоний колір тексту, то колір тексту всіх його дочірніх елементів і нащадків теж стане червоним:Успадковані властивості можна перевизначити, застосувавши індивідуальне правило для потрібного елемента:
Щоб дізнатися, які CSS властивості успадковуються, а які ні, потрібно дивитися опис конкретного властивості в CSS довіднику.
Обчислення специфічності (пріоритету) селектор
Існує безліч способів застосувати стиль оформлення до потрібного елементу. Але що відбувається, якщо один елемент вибирають два або більше взаємовиключних селектора? Ця дилема вирішується за допомогою двох принципів CSS: специфічності селекторів і каскаду.
Специфічність селектор (selector's specificity) визначає їх пріоритет в таблиці стилів. Чим специфичнее селектор, тим вище його пріоритет. Для обчислення специфічності селектора використовуються три групи чисел (a, b, c), розрахунок проводиться таким чином:
- Вважається число ідентифікаторів в селекторі (група a)
- Вважається число селекторів класів, атрибутів і псевдо-класів в селекторі (група b)
- Вважається число селекторів типу і псевдо-елементів в селекторі (група c)
- Селектор всередині псевдо-класу заперечення (: not) вважається як будь-який інший селектор, але сам псевдо-клас заперечення не бере участі в обчисленні селектора
- Універсальний селектор (*) і комбінатори не беруть участі в обчисленні ваги селектора
У прикладі нижче селектори розташовані в порядку збільшення їх специфічності:
Найвищий пріоритет має число з групи «a», число групи «b» має середній пріоритет, число з групи «c» має найменший пріоритет. Числа з різних груп не підсумовуються в одну спільну рису, тобто візьмемо з прикладу останній рядок зі специфічністю селектора «101» - це не означає число «сто один», це означає, що був використаний один селектор з групи «a» (ідентифікатор) і один селектор з групи «c» (селектор типу).
каскадність
Каскадність - це особливість CSS, за допомогою якої браузер визначає значення яких властивостей будуть застосовані до елементу при виникненні конфлікту властивостей. Конфлікт властивостей виникає, коли для елемента визначено кілька правил, селектори яких мають однакову специфічність і вони містять однакові властивості, але з різними значеннями.
Каскадність працює наступним чином: якщо в таблиці стилів для одного елемента визначено кілька правил, селектори яких мають однакову специфічність і вони містять конфліктуючі властивості то, для елемента встановлюються значення конфліктуючих властивостей того правила, яке розташоване нижче в таблиці стилів:
Якщо різні правила для одного елемента містять властивості, які не конфліктують, то вони об'єднуються в один стиль, тобто кожне нове правило додає нову інформацію про стилі до цим правилом, яке знаходиться вище:
Код, розташований в прикладі вище, рівносильний коду в прикладі нижче, в якому все три властивості вказані в одному правилі:
Зазвичай додаткові правила для елемента вказуються в тих випадках, коли було поставлено одне стиль відразу для декількох елементів, але крім цього необхідно додати щось ще для певного елемента: