2

我有两种样式，一种是元素级别的“td”，另一种是类级别的“.specialTable td”。而且我遇到了一些问题，因为如果我没有再次指定它们，类级别样式会继承所有“td”样式属性。

我有一个 CSS 样式

td
{
  background-color:black;
}

然后我有

.specialTable tr:nth-child(even) {
    background-color: white;
}

和

.specialTable td
{
  background-color:none;
}

这里发生的情况是，即使我要求 .specialTable td 没有背景，它也会从元素样式“td”继承黑色背景，这会导致我的元素样式“tr”被屏蔽，因为单元格位于顶部行。

我正在尝试为我的表格设置交替行样式。请帮助我如何阻止原始的 'td' 元素样式妨碍我。

这是小提琴：http: //jsfiddle.net/PIyer/phADs/1/

4

5 回答 5

2

你的css中有一个类型，但我不确定这是否是问题

specialTable tr:nth-child(even) {
    background-color: white;
}

应该

.specialTable tr:nth-child(even) {
    background-color: white;
}

同样 background-color:none 是无效的 css ，也许是 background-color:transparent

于 2013-03-06T15:32:18.193 回答
1

none不是背景颜色的有效属性。试试这个：

.specialTable tr {
    background-color: black;
}

.specialTable tr:nth-child(even) {
    background-color: white;
}

或者你可以在你的例子中使用

.specialTable td
{
    background-color: transparent;
}

这应该让白色发光。

于 2013-03-06T15:40:30.697 回答
1

您可以通过使用基本的 CSS 覆盖来简化事情。

假设你有这个：

<table class="specialTable">
    <tr>
        <td>This is an odd row</td>
    </tr>
    <tr>
        <td>This is an even row</td>
    </tr>
    <tr>
        <td>This is an odd row</td>
    </tr>
    <tr>
        <td>This is an even row</td>
    </tr>
</table>

您的默认<td>样式是这样的：

td { 
    background-color:black;
    color: #FFF;
}

要对 进行交替（斑马）样式.specialTable，您可以简单地执行以下操作：

.specialTable tr:nth-child(even) td {
    background-color: blue;
}

这将覆盖偶数标签<td>中所有标签的原始 CSS 定义。<td><tr>

在这里查看一个工作示例：http: //jsfiddle.net/rh5vV/

重要的是要注意nth-childsudo 选择器在 IE8 及更低版本中不起作用，因此您可能希望将 class of.even应用于您的偶数<tr>标签。

于 2013-03-06T15:42:49.690 回答
0

您可以使用background-color:transparent;或取决于background:none;：

.specialTable td {
  background-color:transparent;
}
于 2013-03-06T15:32:49.647 回答
0

试试这个

 .specialTable tr td {
         background-color:transparent;
    }

使用背景无不正确，使用透明代替

http://jsfiddle.net/RBY2v/1/

于 2013-03-06T15:45:30.320 回答