CSS background color is picky

Question

CSS background color gives me problems. The style block should use ".land.custom_one" instead of the usual ".custom_one" to work. Removing the “ground” from the td class also makes it work, but I need a “ground” class to freeze in order to work like not all tds that need a freeze effect. Style is defined after style.css. I have this problem in both Chrome and 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

The specificity of the selector is calculated as follows:

• count the number of identifier attributes in the selector (= a)
• count the number of other attributes and pseudo-classes in the selector (= b)
• (= c)
• .

a-b-c ( ) .

: 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;
}