Справка:CSS/Принципы

Зачастую к одному и тому же элементу применяются множество правил, в силу их универсальности.
(например: li {color:red}, .cats li {color:pink}) И перед браузером встает вопрос - какое из них выбрать для отображения. Чтобы ответить на него, браузер следует двум принципам: насколько специфичен селектор элемента и каков его порядок.

Специфичность[]

Специфичность определяется следующим образом: подсчитывается количество элементов, составляющих селектор и исходя из них определяется "вес" селектора.

Правило с наибольшим "весом" (специфичностью) главнее остальных.

В следующем списке типы селекторов расположены по возрастанию специфичности:

селекторы типов элементов (например, h1) и псевдоэлементов (например, ::before).
селекторы классов (например, .example), селекторы атрибутов (например, [type="radio"]) и псевдоклассов (например, :hover).
селекторы идентификаторов (например, #example).
- Универсальный селектор (*), комбинаторы (+, >, ~, ' ') и отрицающий псевдокласс (:not()) не влияют на специфичность. (Однако селекторы, объявленные внутри :not(), влияют)

Из примера выше главнее второй селектор (.cats li), т.к. "вес" двух его элементов больше.

Подробнее:

Ключевое слово !important[]

Правило с ключевым словом !important в конце перебивает специфичность всех остальных правил. Например: style="color:red !important" (и коты-воители окрасятся в красный)

при нескольких !important выбирается наиболее специфичный

Также стили, объявленные в элементе (например, style="font-weight:bold"), переопределяют правила из внешних файлов стилей и, таким образом, их специфичность можно считать наивысшей (за исключением !important).

В сумме ─ специфичность считается по нескольким параметрам:

это свойство элемента или внешнего стиля
сколько тегов, классов, id и др. составляют селектор. теги<классы<id
- для простоты, веса считают как 1 10 100, однако они не складываются
применен ли к стилю !important или нет

Порядок[]

Если стили обладают одинаковой специфичностью ─ вопрос разрешит порядок.
Правило довольно простое: кто последний ─ тот и прав. Пример:

/*Роли*/
.autor {
  color: red;
}
/*Цитаты*/
.quote {
  color: grey;
}
<q class="quote autor">И он сказал: Я не буду это терпеть!</q>

Текст в данном случае окрасится в серый, а не красный, т.к. среди стилей с одинаковой специфичностью действует всегда последнее.
Правила срабатывают именно в порядке, в котором они описаны в ксс, а не, к примеру, порядке классов элемента

также из этого следует, что правила следует указывать от наиболее общих к специфичным

В общей сложности браузер следует следующему порядку, касательно нескольких источников:

Стили самой страницы (в порядке их встречи)
Пользовательские стили ─ добавленные пользователем через браузер
(не путать с Справка:Пользовательские_стили = личными глобальными и локальными стилями)
Стили браузера

См. Шпаргалка по CSS и JS#Порядок загрузки

Наследование[]

Также спецификацией CSS предусмотрено наследование свойств, относящихся к текстовому содержимому страницы (ради целостности отображения):
color, cursor, direction, font (font-size, font-family, font-style, font-weight), letter-spacing, line-height, list-style, text-align, text-indent, text-transform, visibility, white-space и word-spacing.

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

Свойства, относящиеся к форматированию блоков, не наследуются:
background, border, display, float и clear, height и width, margin, min-max-height (и -width), outline, overflow, padding, position, text-decoration, vertical-align и z-index.

Список наследуемых свойств можно посмотреть в стандарте:
(если в колонке Inherited? напротив свойства стоит yes, то свойство наследуемое, иначе ненаследуемое)

Каскадность:итог[]

«Каскадное» применение стилей означает, что стили могут наследовать и переопределять другие стили, которые были объявлены ранее, следуя довольно простой иерархии, называемой специфичностью. Если специфичность одинакова ─ в дело вступает порядок записи правил.