为什么桌子上会出现边框?

时间:2017-08-29 17:47:10

标签: html css

我有一个用html / css创建的简单表:

<div id="test">
    <table class="test-table">
        <tbody>
        <tr class="test-header">
            <td>
                <label>Name</label>
                <div>Bob</div>
            </td>
            <td class="middle-cell">
                <label>Number</label>
                <div>1</div>
            </td>
            <td>
                <label>Date</label>
                <div>Today</div>
            </td>
        </tr>
        </tbody>
    </table>
</div>

我有一些简单的css

.xxxxx > th, tr, td {
    border: 1px solid black;
}

这显示了我桌面上的边框,即使我的class中没有xxxxx html。这个如何以及为何显示?如果我想将边框范围限定为此特定th中的trtdtable,我该怎么做?

1 个答案:

答案 0 :(得分:3)

CSS应如下所示。

<强>原因:

您正在使用分组选择器(如果您愿意,可以将样式应用于多个选择器。只需用逗号分隔选择器),但它不会像分组所有子代一样工作父选择器(.class > a, p, br),但它应该像(.class > a, .class > p, .class > br

&#13;
&#13;
.xxxxx > tr, .xxxxx > td {
    border: 1px solid black;
}
&#13;
<div id="test">
    <table class="test-table">
        <tbody>
        <tr class="test-header">
            <td>
                <label>Name</label>
                <div>Bob</div>
            </td>
            <td class="middle-cell">
                <label>Number</label>
                <div>1</div>
            </td>
            <td>
                <label>Date</label>
                <div>Today</div>
            </td>
        </tr>
        </tbody>
    </table>
</div>
&#13;
&#13;
&#13;