CSS 背景颜色很挑剔

Question

CSS 背景颜色给我带来了问题。样式 block 需要使用“.land.custom_one”而不是普通的“.custom_one”才能工作。从 td-class 中删除“land”也可以使它工作，但我需要悬停的“land”-class 才能工作，因为它不是所有需要悬停效果的 tds。样式 block 在 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

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

• 统计选择器中ID属性的个数(=一个)
• 统计选择器中其他属性和伪类的个数(= b)
• 统计选择器中元素名称的个数(=c)
• 忽略伪元素。

连接三个数字 a-b-c(在大基数的数字系统中)给出特异性。

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

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

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