Підручник CSS - Пріоритети стилів у CSS

При використанні CSS досить часто можна спостерігати таку ситуацію, коли ці стилі чомусь не працюють, хоча все написано без помилок. Наприклад, не змінюється розмір шрифту, колір посилання або інші параметри HTML-елемента. У такому разі можна говорити тільки про один — десь у таблиці стилів вже існує селектор (можливо і не один), що впливає на даний елемент і містить ту ж саму властивість CSS, яка у вас не хоче діяти. Цей селектор був створений вами раніше і, можливо, ви про нього забули або не забули, а просто не врахували правила пріоритетів стилів.

Саме про пріоритети стилів ми і поговоримо в цьому уроці, з якого ви дізнаєтеся про цілу низку правил, які використовують браузери при обробці вашого CSS. Спочатку ми окремо розглянемо з вами кожен фактор, що впливає на підсумковий результат, а потім об'єднаємо все це в загальну картину.

Важливо! Діти ще раз повторюю — обчислення пріоритетів проводиться браузерами тільки в тих ситуаціях, коли на один і той же HTML-елемент впливає кілька властивостей CSS з вашої таблиці стилів, намагаючись у нього змінити той самий параметр, наприклад колір рамки або тексту. Ті властивості, які для даного елемента не дублюються, просто застосовуються до нього й усі.

Пріоритети стилів в залежності від типу селектора

Так, селектори CSS також впливають на стильові пріоритети, причому до уваги беруться не тільки прості селектори (класи, селектори тегів, атрибути і т.д.), а й складові (дочірні, сусідні, селектори нащадків і т.д.).

Щоб обчислити рівень пріоритету (специфічності) будь-якого селектора, браузери використовують певний алгоритм, де кожному типу нараховується певна кількість балів, що визначає вагу селектора. Стилітого селектора, який набере більшої ваги, зрештою і буде застосовано до елемента. Якщо ж вийде так, що якісь селектори, які впливають на той самий HTML-елемент наберуть однакову кількість балів, то будуть використані стильові властивості того, що знаходиться в коді нижче.

А тепер давайте розглянемо, яким чином браузери вважають ці бали.

  1. Універсальний селектор — кількість балів, що нараховуються, дорівнює нулю (0).
  2. Селектори тегів та псевдоелементи – по одному (1) балу за кожен.
  3. Селектори атрибутів, класи та псевдокласи – по десять (10) балів за кожен.
  4. Ідентифікатори - по сто (100) балів за кожен ідентифікатор, що знаходиться в селекторі.
  5. Атрибут style — вбудовані стилі не використовують селекторів, а вказуються безпосередньо всередині тегів елементів, але при цьому вони мають найвищий пріоритет тисячою (1000) балів.

Щоб ви краще зрозуміли, як обчислюються ці віртуальні бали, вам кілька простих прикладів.

Як бачите, все досить просто. Тільки ви не лякайтеся заздалегідь, думаючи, що вам доведеться постійно вираховувати ці бали під час створення своїх таблиць стилів. Насправді, їх ніхто ніколи просто так не вважає. Зазвичай про селекторний пріоритет згадують лише тоді, коли якісь стилі не хочуть працювати. Ось тут і починаються «танці з бубном» та пошуки винного. :)

Приклад демонструє пріоритети селекторів

Результат у браузері

Правило !important

Правило !important використовується у тих випадках, коли необхідно, щоб конкретна властивість була обов'язково застосована до елемента незалежно від того, в якому селекторі та в якому місці CSS-кода воно знаходиться, а також, незважаючи на наявні дублі. Загальний синтаксис:

Приклад використання правила !important

Результат у браузері

Текст першого параграфа даного прикладу зелений, тому що береться значення якості color, яке вказано нижче. А ось текст другого параграфа червоний, тому що був використаний !important.

Зверніть увагу, що властивості з !important мають навіть більший пріоритет, ніж вбудовані за допомогою атрибуту style .

Пріоритети стилів, що підключаються та імпортуються.

То як і в якому порядку браузер створює цю загальну таблицю стилів з окремих файлів-шматочків? Ну, тут все досить передбачувано, припускаю, що багато хто з вас уже давно здогадався. Так ось, браузер зчитує стилі, що підключаються, в міру їх появи в коді, тобто він спочатку бере CSS з самого першого файлу, потім нижче додає стилі другого, ще нижче - третього і так далі. Таким чином, створюється одна загальна каскадна таблиця стилів, в якій діють такі ж правила пріоритетів, як і в звичайній таблиці, що складається з одного файлу.

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

Вміст файлу style1.css

Підсумкова таблиця створена браузером

Підсумкова таблиця стилів з урахуванням пріоритетів та що таке Каскад

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

Ну а чому ж «каскадні таблиці стилів»? Під каскадом у разі якраз і розуміється те, що описано трохи вище. Тобто можливість для браузера отримання CSS із трьох різних джерел з урахуванням правил сортування та пріоритетів стилів. Всі.