В CSS, какова разница между каскадом и наследованием?

В CSS, какова разница между каскадом и наследованием?

Или это одно и то же?

Ответы

Ответ 1

Наследование - о том, как свойства стекают от элемента к его дочерним элементам. Определенные свойства, такие как font-family inherit. Если вы установите семейство шрифтов в body, это семейство шрифтов будет унаследовано всеми элементами в body. То же самое верно для color, но это неверно для background или height, который всегда будет по умолчанию transparent и auto. В большинстве случаев это имеет смысл. Почему фон наследует? Это было бы болью. Что, если шрифты не наследуются? Что бы это выглядело?

каскад - это то, что имеет преимущество, когда есть конфликт. Правила каскада включают в себя:

  • Более поздние свойства переопределяют более ранние свойства
  • Более конкретные селектора переопределяют менее специфические селекторы
  • Указанные свойства переопределяют унаследованные свойства

И так далее. Каскад решает любые конфликтные ситуации. Это порядок, в котором применяются свойства.


(обновление) Специфика - это расчет, используемый для определения приоритета выбора в каскаде. Когда два селектора применяются к одному и тому же элементу, приоритет имеет тот, который имеет более высокую специфичность.

  • Встроенные стили имеют очень высокую специфичность (1000)
  • ID имеют специфику 100
  • классы/атрибуты и псевдоклассы add 10
  • элементы и псевдоэлементы добавляют 1

Добавьте все части цепочки селекторов, чтобы определить общую специфичность. В случае галстука последний селектор имеет приоритет.

Конечно, это связано с различными краями и оговорками. Один класс всегда будет переопределять простые элементы, независимо от того, сколько. Более целевым селекторам присваивается приоритет над унаследованными свойствами из родительских селекторов. И вы можете выбросить все свои вычисления, если кто-то использовал !important - это все козыри.