Question

我有一个用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中的tr，td和table，我该怎么做？

Answer 1

CSS应如下所示。

<强>原因：

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

＆＃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;

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

1 个答案: