html - 仅样式表中的第一个 tr，没有嵌套表

Question

这是一个例子：

http://jsfiddle.net/Bq3AU/

我希望嵌套表 tr:first-child 不是红色的。

我知道我可以使用如下代码：

table.calc table tr {
    backgorund:none;
}

但这仅适用于一个嵌套表。我想编写一个 CSS 规则，只将父表行着色为红色。

我认为这是带有“>”符号的东西，例如 table.calc > tr 或其他东西，但我总是遇到“>”问题。

Answer 1

我认为您不能将其他类 CSS 用于 chiltable 相同的：

<table class="calc1">
<tr><td>title</td><td>title2</td></tr>
<tr>
    <td>
        <table class = "calc2">   
            <tr><td>text</td><td>text</td></tr>
            <tr><td>text</td><td>text</td></tr>
        </table>
    </td>
    <td>
        text
    </td>
</tr>
<table>

CSS：

.calc1 tr:first-child {
background:red;
}

table td {
border:1px solid #000;
padding:10px;
}
.calc2 tr:first-child {
background:blue;
}

Answer 2

我认为这是您想要的，如果不是，请澄清。我使用白色作为通用背景颜色，您可以选择其他颜色：

<style>
/*make all tables white */
table{
background:white;
}
/*make all first child tr's red*/
table tr:first-child{
background:red;
}
/*make all first child tr's that are part of child tables (not parents) white*/
table tr td table tr:first-child{
background:white;
}
/*so now only first child tr's of the top parent tables are red*/
</style>