社区首页 >问答首页 >在table.th.tr和table.tbody.tr中为两种类型的表选择th

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

Stack Overflow用户

提问于 2015-04-19 06:00:13

回答 1查看 1.6K关注 0票数 2

我有数百个HTML文件，我需要在全局css中重新设置表格头的样式。有的有头，有的没有。所以我可以给头像打样式，但是对于没有头像的桌子，我会给出第一个tr的样式。当然，这将样式应用于具有头的第一行表，从而使那些表具有两行头样式。我已经尝试过让那些没有头像的人的等级结构正确

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>

html

css

html-table

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-04-19 06:08:03

试试这个选择器：

.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>