修改后忽略CSS文件

Question

我试图覆盖以下引导值

.table > thead > tr > td.danger, .table > tbody > tr > td.danger, .table > tfoot > tr > td.danger, .table > thead > tr > th.danger, .table > tbody > tr > th.danger, .table > tfoot > tr > th.danger, .table > thead > tr.danger > td, .table > tbody > tr.danger > td, .table > tfoot > tr.danger > td, .table > thead > tr.danger > th, .table > tbody > tr.danger > th, .table > tfoot > tr.danger > th {
background-color: #f2dede;
}

因此，我使用以下内容创建了自己的CSS文件

.myhead {
    background-color: blue;
    color: white;
} 

这里的HTML

<tr class="danger">
    <th class="myhead" nowrap="nowrap">Test</th>

</tr>

现在，为了提高获得引导值的特异性，我决定修改CSS如下

.myhead, #myhead1, #myhead2, #myhead3, #myhead4 {
    background-color: blue;
    color: white;
}       

这样做的问题是浏览器完全忽略CSS文件，在检查页面时甚至看不到我的"myhead“类。以前，当我检查该文件时，我可以清楚地看到我的CSS文件已被考虑在内，但该属性被引导覆盖(通过)。

这里有什么问题？

更新:按照贝伦乔特的建议用昏迷更新，我现在可以看到我的CSS文件返回，但我仍然不能覆盖引导。根据我的计算，我应该有410 (10 + 100 + 100 + 100 + 100)的优先权。

Answer 1

您应该使用逗号来分隔CSS中的类和id。

.myhead #myhead1 #myhead2 #myhead3 #myhead4中的样式将只应用于拥有所有这些类和id的元素。通过添加逗号，样式将应用于所有至少有一个类和id的元素。

示例： div, p选择所有<div>元素和所有<p>元素。

详细报道 CSS选择器。

如果要覆盖某种样式，则必须确保在第一个声明之后嵌入类，或者使用!important。

有关使用 !important的更多信息。

Answer 2

这取决于原始的CSS，但您可能希望将!important添加到CSS规则中，以覆盖其他类：

.myhead, #myhead1, #myhead2, #myhead3, #myhead4 {
    background-color: blue !important;
    color: white !important;
}     

Answer 3

你的选择者关系.myhead #myhead1 #myhead2 #myhead3 #myhead4它是怎么写的，期待#myhead4是#myhead3的孩子，#myhead3是#myhead2的孩子，等等。如果您的文档中没有这种情况，则永远不会使用这种样式。

<th class="myhead">
  <div id="myhead1">
   <div id="myhead2">
    <div id="myhead3">
     <div id="myhead4">This would have a blue background with white text</div>
    </div>
   </div>
  </div>
<th>

在某些作用域中，使用!important很有用，但问题可能来自它，有时很难调试。我对你的建议；

<tr class="danger">
    <th class="myhead" nowrap="nowrap">Test</th>
</tr>

像这样使用selector.class {.}。

th.myhead {
  background-color: blue;
  color: white;
}

这样，所有带有<th>类的myhead元素都将使用声明的样式。ID在每个页面上都是唯一的，所以它是不必要的，可以定义为#id1、#id2等等.希望这能有所帮助。