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

Question

我有数百个HTML文件，我需要在全局css中重新设置表标题的样式。有些有头，有些没有。所以我可以设置标题的样式，但对于没有标题的表，我会设置第一个 tr 的样式。嗯，当然，这也将样式应用于具有 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>