Question

我有两种风格，一种是元素级别'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/

Answer 1

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

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

应该是

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

aslso background-color：none无效css，也许背景颜色：透明

Answer 2

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

.specialTable tr {
    background-color: black;
}

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

或者您可以在您的示例中使用

.specialTable td
{
    background-color: transparent;
}

这应该让白色闪耀。

Answer 3

您可以使用基本的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>标记内所有<td>标记的<tr>原始CSS定义。

在此处查看一个有效的示例：http://jsfiddle.net/rh5vV/

请务必注意，nth-child sudo选择器在IE8及更低版本中不起作用，因此您可能希望将.even类应用于偶数<tr>标记。

Answer 4

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

.specialTable td {
  background-color:transparent;
}

Answer 5

试试这个

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

使用background none不正确，请改用透明

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

如何阻止CSS元素样式进入我的类样式？

5 个答案: