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，这可能会也可能不会起作用;你必须稍微修补一下。

Answer 2

在pwon将tr风格应用于.table-striped tbody>tr:nth-child(odd)>td时，您的代码正在应用td。

试试这个：

.pwon td, .pwon td {
   background-color: rgba(77, 144, 254, 0.47) !important;
}

Answer 3

设置背景的代码在特异性上得分更高。

基本上，尽管您直接引用了应用于该项的类，但第一段代码具体指的是该行的表，表体，行和索引，因此它得分更高。 / p>

这不太理想，但如果您将其他代码添加到选择器的开头，请执行以下操作：

.table-striped tbody>tr.fc:nth-child(odd)>td, .table-striped tbody>trfc:nth-child(odd)>th
{
    background-color: #fcfcfc;
}
.table-striped tbody>tr.fc:nth-child(odd)>td, .table-striped tbody>trfc:nth-child(odd)>th
{
    background-color: rgba(77, 144, 254, 0.47) !important;
    color: black;
    text-align: center;
}

这会为你解决。但它非常混乱，你可以考虑降低另一个选择器的特异性，或使用一个重要的！声明（urgh）;）

为什么我不能应用！重要的CSS规则？

3 个答案: