Что такое уровни каскада?

Question

Думал , что более-менее понял тему каскадности, оказалось не совсем. Я понял, что это набор правил, которыми руководствуется браузер , когда происходит конфликт при задании стилей одному и того же элементу или группе элементов. Но когда сегодня смотрел в интернете про свойство revert, увидел такое определение

Ключевое слово revert (CSS) откатывает один текущий уровень каскада

И теперь запутался, что за уровни каскада такие?

Answer 1

Каскадность CSS – это механизм, благодаря которому к элементу HTML-документа может применяться более чем одно правило CSS. Правила могут исходить из различных источников: из внешней и внутренней таблицы стилей, от механизма наследования, от родительских элементов, от классов и ID, от селектора тега, от атрибута style и т. д. Поскольку в этих случаях часто происходит конфликт стилей, была создана система приоритетов: в конечном итоге применяется тот стиль, который исходит от источника с более высоким приоритетом.

Ключевое слово revert (CSS) откатывает один текущий уровень каскада, таким образом свойство принимает такое значение, которое было бы.

Пример:

Стили браузера
Стили которые вы задали напрямую
Еще стили которые вы задали через родителя (но само ключевое слово all: revert; обозначает что возвращает для элемента которому вы его задали, что он примет стили браузера по умолчанию)

Попробуйте удалить all: revert; и увидите всю магию этого свойства (В примере revert как раз откинул стили 2 приоритетного уровня.)

h1, h2, h3, p, em, strong {
  color: red;
  background-color: yellow;
}

.revert * {
  all: revert;
}

<div class="revert">
  <h1>h1</h1>
  <h2>h2</h2>
  <h3>h3</h3>
  <p>This is an example of some <strong>strong text</strong> and some  <em>emphasized text</em> set to all: revert. If it looks yellow and red, your browser does not support all revert just yet. </p>
</div>

БЛОГ НА HUSL

Что такое уровни каскада?

Ответы (1 шт):