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>

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

1 个答案: