我正在处理一个使用表格布局的遗留网页(不幸的是我无法用新的纯 HTML\CSS 布局替换)并且我遇到了以下问题。
我有这样的情况:
<table class="externalTable">
<tr id="firstRow">
<td>
<div>
<table id="tablistOn">
<!-- SOME ROWS ARE SHOWED -->
</table>
</div>
</td>
<td>SECOND td</td>
<td>THIRD td</td>
</tr>
</table>
我只需要将 bottom-border 属性应用于 #firstRow 行，我是这样做的:
.externalTable #firstRow td, .externalTable #firstRow th {
border-top: 1px solid red;
border-bottom: 1px solid red;
}
但这样做的问题是，这种样式也适用于内部表格行(具有 id="tablistOn" 的行)内的所有丝束。
我认为我可以覆盖它，为这个表定义一个新的样式，但我想问我是否可以只将我的样式应用到外部表，只选择 class="externalTable" 表而不是它的内表id="tablistOn"。
我怎样才能以某种方式做到这一点？
谢谢
最佳答案
您正在使用后代选择器，它将匹配一个元素中的所有 子元素。您需要的是子选择器 - > - 它只会选择一个元素的直接后代。
.externalTable #firstRow>td, .externalTable #firstRow>th {
border-top:1px solid red;
border-bottom:1px solid red;
}
关于html - 如何将 CSS 设置只设置到外部表的 td 而不是内部表？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29672097/