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>

现在为了提高争夺bootstrap值的特异性，我决定修改CSS如下

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

当我这样做的问题是浏览器完全忽略了CSS文件，我甚至无法看到我的＆＃34; myhead＆＃34;我检查页面时上课。以前当我检查文件时，我可以清楚地看到我的CSS文件被考虑在内但是属性被引导程序覆盖（删除）。

这里有什么问题？

更新：根据Berendschot的建议更新昏迷，我现在可以看到我的CSS文件，但我仍然无法覆盖bootstarp。根据我的计算，我应该优先考虑410（10 + 100 + 100 + 100 + 100）

Answer 1

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

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

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

更多信息 CSS Selectors。

如果要覆盖某种样式，则必须确保在第一次声明后嵌入该类，或使用!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等...希望这会有所帮助。

修改后忽略CSS文件

3 个答案: