CSS背景颜色很挑剔

CSS background-color给我带来了问题.样式块需要使用“ .land.custom_one”而不是普通的“ .custom_one”才能工作.从td类中删除“ land”也可以使其工作,但是我需要“ land”类来使悬停工作,因为并非所有需要悬停效果的tds都可以.
在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>

最佳答案

选择器的特异性计算如下：

>计算选择器中ID属性的数量(= a)
>计算选择器中其他属性和伪类的数量(= b)
>计算选择器中元素名称的数量(= c)
>忽略伪元素.

将三个数字a-b-c(在基数较大的数字系统中)连接起来可得出特异性.

元素选择器：0,1(1)

类选择器0、1、0(10)

ID选择器1,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: Specificity Wars