-1

在我的应用程序中的某个地方我有

.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;

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

4

3 回答 3

5

您的.fc和.pwon类在一个tr元素上，但在您的第一条规则中，您将该背景应用于tdor 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如果您不知道自己在做什么，这通常是不好的做法），如果您没有看到背景，请尝试通过复制选择器来匹配您的第一个规则的特异性，然后将.fcor添加.pw到tr部分。根据生成的 HTML，这可能有效，也可能无效；您将不得不对其进行一些修改。

于 2013-10-22T16:24:02.057 回答
2

在您将样式pwon应用于.tr.table-striped tbody>tr:nth-child(odd)>tdtd

尝试这个：

.pwon td, .pwon td {
   background-color: rgba(77, 144, 254, 0.47) !important;
}
于 2013-10-22T16:24:40.617 回答
0

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

基本上，虽然你直接引用了应用于项目的类，但第一段代码具体引用了表、表体、行和行的索引，因此得分更高。

这并不理想，但如果您将其他代码添加到选择器的开头，如下所示：

.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) ;)

于 2013-10-22T16:33:46.777 回答