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

Question

我有数百个 HTML 文件，我需要在全局 css 中重新设置表格标题的样式。有些有头颅，有些没有。所以我可以设置 thead 的样式，但是对于没有 thead 的表，我设置第一个 tr 的样式。好吧，当然，也将样式应用于具有 thead 的表的第一行，从而导致这些表具有两行标题样式。 我已经尝试为那些没有 thead 的人设置正确的层次结构

tbody:first-child tr:first-child td 

但是我不能分别设计这两种类型的表格。任何想法都会非常有帮助。不幸的是不能使用 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

试试这个选择器:

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

:first-child 将同时匹配 thead 或 tbody 并且您可以从那里选择 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>