为什么我不能应用!重要的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,这可能会也可能不会起作用; 你必须稍微修补一下.