Selectivity. Приоритет правил css: два класса на одном уровне или один плюс родительский

Рейтинг: 0Ответов: 1Опубликовано: 30.07.2023

Не могу разобраться, почему первый css (с одним классом своим и одним родительским) получает больший приоритет, чем второй (с двумя классами на одном уровне)? Не нахожу в документации про selectivity ничего про то, что наличие родительского класса даёт преимущество.

.tableContainerBoxed .background-inherit {
    background-color: red;
}

.dataGridCell.background-inherit {
    background-color: blue;
}
css
Источник: Stack Overflow на русском

Ответы

▲ 0

Не понятно почему у вас проблемы. В данном случае селекторы имеют одинаковый вес и по каскадности применяется последнее правило. Ищите ошибку в своём коде. Может в наименовании селекторов. У меня когда-то было, что вместо латинской буквы "C" была русская "С". С виду одно и тоже, но это ошибка

.tableContainerBoxed .background-inherit {
  background-color: red;
}

.dataGridCell.background-inherit {
  background-color: blue;
}
<div class="tableContainerBoxed">
  <p class="dataGridCell background-inherit">Hello, world!</p>
</div>