Это ответ для абсолютных новичков. Если вам нужен обзор этого ответа, прочтите мой второй ответ.
Каскадирование - это процесс объединения разных таблиц стилей и разрешения конфликтов между разными правилами и объявлениями CSS, когда к определенному элементу применяется более одного правила . Потому что, как вы, вероятно, уже знаете, объявление для определенного свойства стиля, такого как размер шрифта, может появляться в нескольких таблицах стилей, а также несколько раз внутри одной таблицы стилей.
Чтобы понять каскадирование, вы должны начать с фазы синтаксического анализа CSS, потому что на этапе синтаксического анализа первым шагом является разрешение конфликтующих объявлений CSS, а вторым шагом является обработка окончательных значений CSS.
Теперь CSS также может поступать из разных источников. Самый распространенный - это CSS, который пишем мы, разработчики. Эти объявления, которые мы помещаем в наши таблицы стилей, называются объявлениями автора. Другим источником могут быть объявления пользователя, то есть CSS, исходящий от пользователя. Например, когда пользователь изменяет размер шрифта по умолчанию в браузере, тогда это CSS пользователя, и, наконец, что не менее важно, есть объявления браузера по умолчанию.
Например, если мы поместим тег привязки в наш HTML-код для ссылки, а затем вообще не стилизуем его, он обычно будет отображаться с синим текстом и подчеркнутым, правильно. Это называется CSS пользовательского агента, потому что он устанавливается браузером. Итак, каскад объединяет объявления CSS, поступающие из всех этих разных источников, но как каскад на самом деле разрешает конфликты, когда применяется более одного правила?
Что ж, то, что он делает, - это анализирует важность, специфичность селектора и порядок источника конфликтующих объявлений, чтобы определить, какое из них имеет приоритет, и вот как это работает. Сначала каскад начинается с предоставления конфликтующих объявлений разной важности в зависимости от того, где они объявлены в их источнике. Наиболее важные объявления - это объявления пользователей, отмеченные ключевым словом important.
Вторыми по важности декларациями являются декларации авторов, отмеченные значком important. В-третьих, обычные объявления автора, затем обычные пользовательские объявления и, наконец, наименее важные из них - это объявления браузера по умолчанию, что на самом деле имеет большой смысл, поскольку мы можем легко перезаписать эти объявления, поступающие по умолчанию из браузера.
Теперь очень часто в таблицах стилей авторов будет просто куча противоречащих друг другу правил без каких-либо важных ключевых слов. На самом деле это наиболее распространенный сценарий, и в этом случае все объявления имеют одинаковое значение. Что же происходит в этом случае? В этом случае каскад рассчитывает и сравнивает особенности селекторов объявлений, и вот как он работает.
Встроенные стили имеют наивысшую специфичность, за ними следуют идентификаторы, затем классы, псевдоклассы и селекторы атрибутов и, наконец, наименее специфичный селектор элемента и псевдоэлемента. Поэтому, когда у нас есть конфликтующие декларации с такой же важностью, как мы видели на последнем слайде, мы вычисляем их специфичность селектора на основе приоритетов, которые я вам только что показал, но давайте посмотрим, как мы фактически вычисляем специфичность на небольшом примере, это всегда лучше, правильно.
В приведенном выше примере все эти объявления имеют одинаковую важность, потому что все они являются объявлениями автора. Итак, давайте рассчитаем особенности их селекторов, чтобы узнать, будет ли цвет фона синим, зеленым, фиолетовым или желтым, и вот как мы это делаем. На самом деле специфика - это не одно число, а одно число для каждой из четырех категорий, которые я вам показал ранее. Встроенные стили, идентификаторы, классы, псевдоэлементы и атрибуты и, наконец, элементы, и для каждого из них мы подсчитываем количество вхождений в селекторе.
Итак, здесь, в первом селекторе, у нас, конечно же, нет встроенных стилей, потому что встроенный стиль должен быть написан в HTML, что здесь не так, поэтому он равен нулю. У нас также нет идентификаторов, так что это снова ноль, но у нас есть один класс, класс кнопки. Итак, для категории классов у нас есть единица, и, наконец, здесь нет селектора элементов, так что ноль и для этого, и все. Специфичность селектора равна нулю, нулю, единице, нулю.
А теперь давайте сравним его с другими. Следующий стиль также не является встроенным, поэтому ноль для первого. Теперь у нас действительно есть селектор идентификатора для идентификатора навигации, так что он один для идентификатора. У нас также есть два класса, тянущие вправо и кнопку, так что это два для категории классов, и, наконец, здесь также есть два селектора элементов. Элемент nav и элемент div, что означает, что их также два для категории elements. Итак, наконец, специфичность селектора - ноль, один, два, два, что на самом деле является очень специфичным селектором.
Селектор номер три очень прост. Это просто селектор элементов, поэтому его специфичность равна нулю, нулю, нулю, единице.
Теперь последний, селектор номер четыре. Сначала снова у нас есть идентификатор навигации, так что он один для идентификатора. Затем у нас есть класс, класс кнопки, а также псевдокласс, который находится при наведении курсора, что составляет всего два для категории классов. Поскольку есть еще один селектор элементов, окончательная специфичность равна нулю, единице, двум, единице.
Теперь давайте узнаем, как мы на самом деле используем эти числа, чтобы узнать, какой из селекторов применим. Мы начинаем смотреть на числа слева направо, начиная с наиболее конкретной категории, встроенных стилей. Если есть селектор с одним для встроенных стилей, выигрывает у всех других селекторов, потому что это наиболее конкретная категория. Что ж, здесь дело обстоит не так, поэтому перейдем к идентификаторам. Мы видим, что у селекторов два и четыре здесь есть единица, а у других - ноль, поэтому те, у которых есть ноль, исключены из игры, потому что они менее специфичны, чем селекторы два и четыре с идентификаторами.
Теперь, когда у обоих селекторов есть один в категории идентификаторов, мы должны двигаться дальше и проверять классы. У них обоих есть два в этой категории, но между ними все еще есть связь, и, наконец, в категории элементов у селектора два есть два, а у селектора четыре только один, и поэтому у нас есть победитель. Селектор номер два является наиболее специфическим селектором из всех, поэтому он придаст нашей кнопке зеленый фон.34 Значение выигравшего объявления называется каскадным значением, потому что оно является результатом каскада.
Итак, мы начинаем с набора объявленных значений в этом случае: синий, зеленый, фиолетовый и желтый, одно из них выигрывает и становится каскадным значением, которое в нашем примере является зеленым.
А теперь представьте, что в четвертом секторе также есть два элемента, тогда оба селектора два и четыре будут иметь одинаковую специфичность, верно. Итак, что происходит в этом случае, и я обещаю вам, что теперь все почти закончилось, хорошо. Что ж, если на этом этапе все еще есть ничья, тогда будет применяться последнее объявление CSS, написанное в коде. Итак, снова, если все равно, если все селекторы объявлений имеют одинаковую специфичность, тогда это просто последнее объявление, которое будет использоваться для стилизации выбранного элемента.