table里面的表，只为外部应用css

Question

我有一个表元素，在一个单元格中也有一个表。 （实际上Jquery UI日历在里面）

如何仅设置父母的样式？

body table tr td:nth-child(2n) {
    background-color: red;
}

这样做：（fiddle here）

但我希望只选择外部单元格（编号2和5）。

Answer 1

使用child (>) selector并在选择器中添加tbody元素（无需更改HTML）：

body > table > tbody > tr > td:nth-child(2n) {
    background-color: red;
}

<强> jsFiddle example

这是有效的，因为它只选择外部表。 在Chrome，FF和IE中成功测试过。

Answer 2

添加以下CSS：

table table tr td:nth-child(2n) {
    background-color: transparent;
}

这会选择单元格，但前提是它们有两个table个父级，并将background-color设置为transparent。

JSFiddle

Answer 3

这样做，只需重置内部表的背景。

<table>
    <tr><td>1</td><td>2</td><td>3</td></tr>    
    <tr>
        <td>4</td>
        <td>5</td>
        <td>
            <table class="inner">
                <tr><td>6</td><td>7</td><td>8</td></tr>
                <tr><td>9</td><td>A</td><td>B</td></tr>
            </table>
        </td>
    </tr>
</table>

table {
    border-spacing: 2px;}
td{
    border-spacing: 2px;
    border: 1px solid black;    
}

body table tr td:nth-child(2n) {
    background-color: red;
}
body .inner tr td:nth-child(2n) {
    background-color: white;
}

Fiddle