Наследование о том, как свойства стекаются от элемента к его дочерним элементам. Некоторые свойства, такие как font-family, наследуются. Если вы установите семейство шрифтов на body, это семейство шрифтов будет унаследовано всеми элементами в body. То же самое верно для color, но это не верно для background или height, который всегда будет по умолчанию transparent и auto. В большинстве случаев это имеет смысл. Почему фон наследовал? Это было бы болью. Что если шрифты не наследуются? Как бы это выглядело?
Каскад - это то, что имеет приоритет при возникновении конфликта. Правила каскада включают в себя:
- Более поздние свойства переопределяют более ранние свойства
- Более конкретные селекторы переопределяют менее специфичные селекторы
- Указанные свойства переопределяют унаследованные свойства
И так далее. Каскад решает любые конфликтные ситуации. Это порядок, в котором применяются свойства.
(обновление) Специфичность - это расчет , используемый для определения приоритета селектора в каскаде. Когда два селектора применяются к одному и тому же элементу, приоритет имеет тот, который имеет более высокую специфичность.
- Встроенные стили имеют очень высокую специфичность (
1000)
- Идентификаторы имеют специфичность
100
- классы / атрибуты и псевдоклассы add
10
- элементы и псевдоэлементы add
1
Сложите все детали в цепочке селекторов, чтобы определить общую специфичность. В случае ничьей последний селектор имеет приоритет.
Конечно, это связано с различными крайними случаями и оговорками. Один класс всегда будет переопределять простые элементы, независимо от того, сколько. Более целевым селекторам предоставляется приоритет над унаследованными свойствами от родительских селекторов. И вы можете выбросить все свои вычисления, если кто-то использовал !important - это превосходит все.