Ця відповідь для абсолютних початківців. Якщо ви хочете оглянути цю відповідь, прочитайте мою другу відповідь.
Каскадування - це процес комбінування різних таблиць стилів та вирішення конфліктів між різними правилами та оголошеннями CSS, коли до певного елемента застосовується більше ніж одне правило . Оскільки, напевно, ви вже знаєте, декларація для певної властивості стилю, як розмір шрифту, може з’являтися в декількох таблицях стилів, а також кілька разів всередині однієї таблиці стилів.
Щоб зрозуміти каскадування, потрібно почати з фази синтаксичного аналізу CSS, оскільки на фазі синтаксичного аналізу першим кроком є вирішення суперечливих декларацій CSS, а другим кроком є обробка кінцевих значень CSS.
Тепер CSS також може надходити з різних джерел. Найпоширеніший - CSS, який ми розробники пишемо. Ці декларації, які ми поміщаємо в наші таблиці стилів, називаються авторськими деклараціями. Іншим джерелом можуть бути декларації користувача, тобто CSS, що надходить від користувача. Наприклад, коли користувач змінює розмір шрифту за замовчуванням у браузері, це CSS користувача, і, нарешті, є декларації браузера за замовчуванням.
Наприклад, якщо ми вкладемо в наш HTML тег прив'язки для посилання, а потім взагалі не стилізуємо його, він зазвичай відображається синім текстом і підкреслюється, правильно. Це називається CSS агента користувача, оскільки він встановлюється браузером. Отже, каскад поєднує декларації CSS, що надходять з усіх цих різних джерел, але як каскад насправді вирішує конфлікти, коли застосовується більше одного правила?
Що ж, це дивиться на важливість, на специфічність селектора та порядок джерел суперечливих оголошень, щоб визначити, який з них має перевагу, і ось як це працює. Спочатку каскад починається з надання суперечливих заяв різної важливості залежно від того, де вони оголошені у своєму джерелі. Найважливіші декларації - це декларації користувачів, позначені важливим ключовим словом.
Другою за значимістю декларацією є авторські декларації, позначені важливими. По-третє, звичайні авторські декларації, потім звичайні декларації користувачів і, нарешті, найменш важливими є декларації браузера за замовчуванням, що насправді має багато сенсу, що ми можемо легко перезаписати ці декларації, що надходять за замовчуванням з браузера.
Зараз багато разів у наших таблицях авторських стилів буде просто купа суперечливих правил без жодного важливого ключового слова. Це насправді найпоширеніший сценарій, і в цьому випадку всі декларації мають абсолютно однакову важливість. Що ж відбувається в цьому випадку? У цьому випадку каскад робить обчислення та порівняння особливостей селекторів оголошень, і ось як це працює.
Вбудовані стилі мають найвищу специфічність, за якими слідують ідентифікатори, потім класи, псевдокласи та селектори атрибутів і, нарешті, найменш конкретний елемент та селектор псевдоелементів. Отже, коли ми маємо суперечливі декларації з такою ж важливістю, як ми бачили на минулому слайді, ми обчислюємо їх специфічність селектора на основі пріоритетів, які я щойно показав вам, але давайте подивимось, як насправді ми обчислюємо специфіки на маленькому прикладі, це завжди найкраще, правильно.
З наведеного вище прикладу всі ці декларації мають однакову важливість, оскільки всі вони є авторськими деклараціями. Тож давайте обчислимо їх специфіку селектора, щоб з’ясувати, чи буде колір фону синім, зеленим, фіолетовим чи жовтим, і ось як ми це робимо. Специфіка - це насправді не просто одне число, а одне число для кожної з чотирьох категорій, які я вам показав раніше. Вбудовані стилі, ідентифікатори, класи, псевдоелементи та атрибути і, нарешті, елементи, і для кожного з них ми підраховуємо кількість випадків у селекторі.
Отже, тут, у селекторі один, у нас, звичайно, немає вбудованих стилів, оскільки вбудований стиль повинен бути написаний в HTML, що тут не так, тому це нуль. У нас також немає ідентифікаторів, тому це знову нуль, але у нас є один клас, клас button. Отже, для категорії класів у нас є один, і, нарешті, тут немає селектора елементів, такого нуля для цього, і все. Специфічність селектора - нуль, нуль, одиниця, нуль.
А тепер давайте порівняємо це з іншими. Наступний також не є вбудованим стилем, тому для першого нуль. Зараз у нас насправді є селектор ідентифікатора для навігаційного ідентифікатора, так, це один для ідентифікатора. У нас також є два класи, які можна натиснути вправо та кнопку, тому це два для категорії класів, і нарешті, тут також є два селектори елементів. Елемент nav та елемент div, що означає, що це також два для категорії елементів. Отже, нарешті, специфічність селектора дорівнює нулю, одному, двом, двом, що насправді є дуже специфічним селектором.
Селектор номер три дуже простий. Це просто селектор елементів, тому специфічність дорівнює нулю, нулю, нулю, одиниці.
Тепер останній, селектор номер чотири. По-перше, у нас є навігаційний ідентифікатор, тому це один для ідентифікатора. Далі ми маємо клас, клас button, а також псевдо-клас, який наводить курсор, що в цілому робить його двома для категорії класів. Оскільки є також один селектор елементів, кінцева специфіка дорівнює нулю, одному, двом, одному.
Тепер давайте знати, як ми насправді використовуємо ці цифри, щоб з’ясувати, хто з селекторів застосовується. Ми починаємо розглядати цифри зліва направо, починаючи з найбільш конкретної категорії, вбудованих стилів. Якщо є селектор з одним для вбудованих стилів, він виграє проти всіх інших селекторів, оскільки це найбільш конкретна категорія. Ну, тут справа не в цьому, тому давайте перейдемо до посвідчень. Ми бачимо, що тут селектори два та чотири мають одиницю, тоді як інші мають нуль, тому ті, що мають нуль, виходять з гри, оскільки вони менш конкретні, ніж селектори два та чотири з ідентифікаторами.
Тепер, оскільки обидва селектори мають один у категорії Ідентифікатори, ми маємо рухатися далі та перевіряти класи. У обох у цій категорії все ще є два, і, нарешті, у категорії елементів, у селектора два є два, тоді як у селектора чотири є лише один, і тому ми маємо тут переможця. Селектор номер два є найбільш конкретним селектором з усіх, і тому він додасть нашій кнопці зелений фон.34 Значення виграшної декларації називається каскадним значенням, оскільки це результат каскаду.
Отже, ми починаємо з групи оголошених значень, у цьому випадку синій, зелений, фіолетовий та жовтий один із них виграє і стає каскадним значенням, яке в нашому прикладі є зеленим.
А тепер уявіть, що сектор чотири також мав два елементи, тоді обидва селектори два і чотири мали б однакову специфіку, вірно. Отже, що трапиться в цьому випадку, і я обіцяю вам, що це майже закінчилося зараз добре. Ну, якщо на цьому етапі все ще є зв’язок, тоді застосовуватиметься остання декларація CSS, написана в коді. Отже, якщо все рівно, якщо всі селектори оголошень мають однакову специфіку, тоді це просто остання декларація, яка буде використана для стилізації обраного елемента.