Skip to main content

Що означає «каскад» у поведінці CSS-правил?

CSSJunior~1 хв читання
Запропонувати правку

Каскад у CSS, це механізм, за яким браузер обирає, яке з кількох конфліктуючих правил застосувати до елемента. Якщо до одного й того самого елемента підходять різні стилі, CSS «стікає» їх за пріоритетністю і обирає підсумкове значення, немов вода, яка тече згори вниз по каскаду.

Каскад враховує три головні критерії:

1. Джерело правила

Більш пріоритетні джерела перекривають менш пріоритетні. Умовна ієрархія:

  1. inline-стилі (style="")
  2. стилі в <style> або підключеному CSS-файлі
  3. типові стилі браузера

2. Специфічність (точність селектора)

Якщо два правила з одного джерела конфліктують, перемагає те, чия «точність» вища. За значущістю:

  1. id, найточніший
  2. класи, псевдокласи
  3. теги, псевдоелементи

Наприклад:

css
p { color: blue; } /* низька специфічність */ .text { color: green; } /* вища */ #main { color: red; } /* найвища */

Підсумковим буде red.

3. Порядок у коді

Якщо специфічність однакова, перемагає те правило, яке написане пізніше.

css
p { color: blue; } p { color: black; } /* застосовується це */

Підсумок: каскад, це система пріоритетів, яка вирішує, яке CSS-правило застосувати, якщо їх декілька. Він враховує джерело → специфічність → порядок правил.

Коротка відповідь

Для співбесіди
Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Запропонувати правку