Question

CSS background-color给了我一些问题。样式块需要使用“.land.custom_one”而不是普通的“.custom_one”才能工作。从td-class中删除“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>

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: Specificity Wars

Answer 2

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

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

CSS背景颜色很挑剔

2 个答案: