在 table.th.tr 和 table.tbody.tr 中为两种类型的表选择 th

Question

我有数百个 HTML 文件，我需要在全局 css 中重新设置 table header 的样式。有些有头颅，有些没有。所以我可以为 thead 设置样式，但是对于没有 thead 的 tables，我为第一个 tr 设置样式。好吧，当然，将样式应用于也有 thead 的 table 的第一行，导致那些 table 具有两行 header 样式。我已经尝试为那些没有 thead

的人设置正确的层次结构

tbody:first-child tr:first-child td

但是我不能分别设置这两种类型的 table 的样式。任何想法都会非常有帮助。不幸的是不能使用 JavaScript.

<div class="tablenoborder">
    <table cellpadding="4" cellspacing="0" summary="" class="table" frame="border" border="1" rules="all">
        <tbody class="tbody">
            <tr class="row">
                <td class="entry" valign="top">
                    <strong class="ph b">Option</strong>
                </td>
                <td class="entry" valign="top">
                    <strong class="ph b">Description</strong>
                </td>
            </tr>
        </tbody>
    </table>
</div>

<div class="tablenoborder">
    <table cellpadding="4" cellspacing="0" summary="" class="table" frame="border" border="1" rules="all">
        <thead class="thead" align="left">
            <tr class="row">
                <th class="entry" valign="top" id="d29429e118">UI Elements</th>
                <th class="entry" valign="top" id="d29429e121">Description</th>
            </tr>
        </thead>
        <tbody class="tbody">
            <tr class="row">
                <td class="entry" valign="top" headers="d29429e118 ">Language</td>
                <td></td>
            </tr>
        </tbody>
    </table>
</div>

Answer 1

试试这个 select 或：

.table > :first-child > tr:first-child > * {
    /* ... */
}

:first-child 将同时匹配 thead 或 tbody 并且从那里你 select 是 tr 元素的直接子元素，这些元素是 th（在 thead) 或 td 内（在 tbody 内）。

查看下面的演示。

.table > :first-child > tr:first-child > * {
    background: #EEE;
}

.tablenoborder {margin-bottom: 10px;}

<div class="tablenoborder">
    <table cellpadding="4" cellspacing="0" summary="" class="table" frame="border" border="1" rules="all">
        <tbody class="tbody">
            <tr class="row">
                <td class="entry" valign="top">
                    <strong class="ph b">Option</strong>
                </td>
                <td class="entry" valign="top">
                    <strong class="ph b">Description</strong>
                </td>
            </tr>
            <tr class="row">
                <td class="entry" valign="top">
                    <strong class="ph b">Option</strong>
                </td>
                <td class="entry" valign="top">
                    <strong class="ph b">Description</strong>
                </td>
            </tr>
        </tbody>
    </table>
</div>

<div class="tablenoborder">
    <table cellpadding="4" cellspacing="0" summary="" class="table" frame="border" border="1" rules="all">
        <thead class="thead" align="left">
            <tr class="row">
                <th class="entry" valign="top" id="d29429e118">UI Elements</th>
                <th class="entry" valign="top" id="d29429e121">Description</th>
            </tr>
        </thead>
        <tbody class="tbody">
            <tr class="row">
                <td class="entry" valign="top" headers="d29429e118 ">Language</td>
                <td></td>
            </tr>
        </tbody>
    </table>
</div>

在 table.th.tr 和 table.tbody.tr 中为两种类型的表选择 th

Selecting th in table.th.tr vs table.tbody.tr for two types of tables

html

css

html-table