修改后忽略的 CSS 文件

Question

我正在尝试覆盖以下 Bootstrap 值

.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 文件，在检查页面时我什至看不到我的“myhead”类。以前，当我检查文件时，我可以清楚地看到我的 CSS 文件已被考虑在内，但该属性被 Bootstrap 覆盖(删除线)。

这里有什么问题？

更新:按照 Berendschot 的建议更新了 coma，我现在可以看到我的 CSS 文件，但我仍然无法覆盖 bootstarp。根据我的计算，我的优先级应该是 410 (10 + 100 + 100 + 100 + 100)

Answer 1

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

.myhead #myhead1 #myhead2 #myhead3 #myhead4 中的样式将仅应用于具有所有这些类和 ID 的元素。通过添加逗号，样式将应用于至少具有其中一种样式的所有元素。

Example: div, p Selects all <div> elements and all <p> elements.

更多 CSS Selectors .

---

如果你想覆盖某个样式，你必须确保在第一次声明之后嵌入类，或者使用!important .

更多关于使用 !important .