css - 为什么我不能应用 !Important CSS 规则？

Question

在我的应用程序中的某处我有

.table-striped tbody>tr:nth-child(odd)>td, .table-striped tbody>tr:nth-child(odd)>th {
   background-color: #f9f9f9;
}

通过使用服务器端代码(在转发器控件的 ItemDataBound 事件中)，我将以下 CSS 类应用于特定行，如下所示

<tr id="MyRow" class="fc pwon">

哪些是...

.fc {
   background-color: #fcfcfc;
}
.pwon {
   background-color: rgba(77, 144, 254, 0.47) !important;
   color: black;
   text-align: center;
}

不幸的是，应用在该行的颜色是 #f9f9f9;

为什么会这样？我该如何解决？

Answer 1

您的 .fc 和 .pwon 类位于 tr 元素上，但在您的第一条规则中，您将该背景应用于td 或 th。表格单元格的背景始终绘制在表格行的背景之上，因此您看不到行背景。

您需要将选择器替换为以下内容:

.fc>td, .fc>th {
   background-color: #fcfcfc;
}
.pwon>td, .pwon>th {
   background-color: rgba(77, 144, 254, 0.47) !important;
   color: black;
   text-align: center;
}

我不清楚为什么你只有一个 !important ，但要么它们都需要存在，要么根本不需要存在。首先删除 !important(因为如果您不知道自己在做什么，!important 通常是不好的做法)，如果您没有看到背景，通过复制选择器然后将 .fc 或 .pw 添加到 tr 部分，尝试匹配第一条规则的特异性。这可能有效，也可能无效，具体取决于生成的 HTML；你必须稍微修改一下。