CSS background-color является требовательным

Question

Цвет фона CSS вызывает у меня проблемы.Блок стиля должен использовать ".land.custom_one" вместо обычного ".custom_one" для работы.Удаление «land» из td-класса также заставляет его работать, но мне нужен класс «land», чтобы hover работал, так как не все tds, которым нужен эффект hover.Блок стиля определяется после style.css.У меня есть эта проблема в Chrome и Firefox.

style.css
#id table {
  background-color: blue;
}
#id td.land {
  background-color: green;
}
#id td.land:hover {
  background-color: black;
  color: orange;
}

style block
.custom_one {
  background-color: red;
  color: white;
}

html
<td class="land custom_one"></td>

Answer 1

Специфика селектора рассчитывается следующим образом:

• подсчитывает количество атрибутов идентификатора в селекторе (= a)
• подсчитывает количество других атрибутов и псевдоклассов вселектор (= b)
• подсчитывает количество имен элементов в селекторе (= c)
• игнорирует псевдоэлементы.

Объединяет три числа abc(в системе счисления с большой базой) дает специфичность.

Выбор элемента: 0, 0, 1 (1)

Выбор класса 0,1, 0 (10)

Селектор идентификатора 1, 0, 0 (100)

CSS:

 .blue {
 font-color:blue;
 }

 #red {
 font-color:red;
 }

HTML:

 <div class="blue">
    <div class="blue">
        <div class="blue">
            <div id="red">this text will be red</div>
        </div>
     </div>
  </div>

Лучший способ объяснить это - это то, что сделал этот парень: CSS: Войны специфичности

Answer 2

Когда ничего не помогает, используйте !important.

.custom_one {
  background-color: red !important;
  color: white !important;
}