html - HTML表格CSS？

Question

常见的

table tr td
{
    vertical-align:middle;
}

风俗

table.custom tr td
{
    vertical-align:top;
}

当我这样使用时：

<table class="custom">
    <tr>
        <td>
            <table>
                <tr>
                    <td>this text align top, but I want to align middle
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

子表的行为与其父表一样。怎么能忽略父元素样式？

score 1 · Accepted Answer

您可以做的一件事是添加子选择器，如下所示：

table.custom > tr > td { }

然后只有直接的孩子会匹配风格

score 1 · Accepted Answer

您可以使用>指示器仅针对直接子元素

table.custom > tr > td
{
    vertical-align:top;
}

但是应该注意的是，table在 a中使用 atable通常不是一个好主意。注意 2：这在 IE6 中不起作用。

score 1 · Accepted Answer

table.custom tr td将选择任何级别的孩子。以下 DOM 链将全部匹配

table.custom->tr->td
table.custom->tr->foo->td
table.custom->foo->tr->bar->td

看看 CSS 子选择器>

html - HTML表格CSS？

3 回答 3

Related

Reference