我有一个用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
,我该怎么做?
答案 0 :(得分:3)
CSS应如下所示。
<强>原因:强>
您正在使用分组选择器(如果您愿意,可以将样式应用于多个选择器。只需用逗号分隔选择器),但它不会像分组所有子代一样工作父选择器(.class > a, p, br
),但它应该像(.class > a, .class > p, .class > br
)
.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;