如何将 CSS 设置仅设置为外部 table 的 td 而不是内部 table？

Question

我正在处理使用 table 布局的旧网页（不幸的是我无法用新的纯 HTML\CSS 布局替换）并且我遇到以下问题。

我有这样的情况：

<table class="externalTable">
    <tr id="firstRow">
        <td>
            <div>
                <table id="tablistOn">
                    <!-- SOME ROWS ARE SHOWED -->
                </table>
            </div>
        </td>

        <td>SECOND td</td>
        <td>THIRD td</td>
    </tr>
</table>

我只需要将 bottom-border 属性应用到 #firstRow 行，我是这样做的：

.externalTable #firstRow td, .externalTable #firstRow th {
    border-top: 1px solid red;
    border-bottom: 1px solid red;
}

但这样做的问题是这种样式也适用于内部 table 行（具有 id="tablistOn" 的行）内的所有丝束。

我认为我可以覆盖它，为此 table 定义一个新样式，但我想问我是否可以仅将我的样式应用到外部 table 选择 class="externalTable" table 但不是其内部 table id="tablistOn".

我怎样才能以某种方式做到这一点？

Tnx

Answer 1

您正在使用后代 selectors，它将匹配元素中的 all children。你需要的是 child selectors - > - 这只会 select direct 一个元素的后代。

.externalTable #firstRow>td, .externalTable #firstRow>th {
    border-top:1px solid red;
    border-bottom:1px solid red;
}

Answer 2

尝试这样做：

.externalTable #firstRow td, .externalTable #firstRow th {
    border-top: 1px solid red;
    border-bottom: 1px solid red;
}

#firstrow table td {
    border: none;
}

此致。

Answer 3

你可以写两种方法来解决这个问题。

1.

#externalTable  td{
// One Style
}

#tablistOn td{
// One Style
}

2

#externalTable  td:not(#tablistOn td) {
// Styles
}

如何将 CSS 设置仅设置为外部 table 的 td 而不是内部 table？

How to set a CSS settings only to the td of an external table but not to the internal table?

html

css

xhtml

layout