仅样式表中的第一个 tr，没有嵌套表答案

【问题标题】：Style only first tr in table, without nested tables仅样式表中的第一个 tr，没有嵌套表
【发布时间】：2013-07-27 19:14:15
【问题描述】：

这是一个例子：

http://jsfiddle.net/Bq3AU/

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

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

table.calc table tr {
    backgorund:none;
}

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

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

【问题讨论】：

标签： html background html-table row

【解决方案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;
}

【讨论】：

【解决方案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>

【讨论】：