CSS背景颜色很挑剔

Question

CSS背景颜色给我带来了麻烦。样式块需要使用“.land.custom_one”而不是纯粹的“.custom_one”才能工作。从td-class中删除“land”也可以使其工作，但我需要“land”类才能使悬停效果生效，因为并非所有的td都需要悬停效果。样式块在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>

- Kim

Answer 1

选择器的特殊性计算方法如下：

• 计算选择器中ID属性的数量（= a）
• 计算选择器中其他属性和伪类的数量（= 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：优先级之战

- Sphvn

---

解决方案是将块样式定义为“.custom_one，#id td.land.custom_one”。 - Kim

Answer 2

当所有其他方法都失败时，使用！important。

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

- recursive

---

这值得注意，但如果您理解特定性，则永远不应该需要它。 - Sphvn