CSS 特异性：带 ID 的选择器不会覆盖带 class 的选择器？

Question

我不太精通 CSS，但我了解特异性的基本概念（或者我认为如此）。最近我试图覆盖 table CSS of Bootstrap 3，它是为每个单元格定义的（这是部分位，对检查元素有效的部分） :

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

我试图覆盖包含该单元格的整行的背景颜色，方法是：

table#results > tbody > tr.highlighted {
    background-color: #ffd15b;
}

据我了解，由于 ID，它具有更高的特异性。但是它根本不起作用，直到我在 CSS:

中引入 child td

table#results > tbody > tr.highlighted > td {
    background-color: #ffd15b;
}

为什么我的第一次尝试没有成功？我在 Safari 和 Chrome（最新版本）

中都试过了

Answer 1

您的问题不是 CSS 特异性，而只是单元格 (<td>) 的背景隐藏了行 (<tr>) 的背景。

Answer 2

尝试将 border-collapse 属性添加到父级 table，如下所示
table#results { border-collapse: collapse;}

CSS specificity: Selector with ID doesn't override selector with class?