如何解决css 属性填充通过规则不起作用,而相同的 css inline-applied 确实
table {
border: 1px solid black;
}
table.whole > tr > td {
padding: 20px 0 20px 0;
}
<!-- doesn't work via css rule -->
<table class="whole">
<tr>
<td>
<table>
<tr>
<td>abcd</td>
</tr>
</table>
</td>
</tr>
</table>
<hr>
<!-- works inline -->
<table>
<tr>
<td style="padding:20px 0 20px 0">
<table>
<tr>
<td>abcd</td>
</tr>
</table>
</td>
</tr>
</table>
我是否可能误解了子选择器 >
的工作原理,或者这里是否存在某种限制或错误?...
解决方法
如果您在 Chrome devtools 中检查您的代码,您将看到浏览器已自动为您在 <table />
和行之间插入所需的 <tbody>
元素。因此,<tr />
不再是 <table />
的直接后代。所以问题是您的 HTML 格式错误/不符合规范。如果您添加 <tbody />
元素并相应地重写您的 CSS,它将正常工作:
table {
border: 1px solid black;
}
table.whole > tbody > tr > td {
padding: 20px 0 20px 0;
}
<!-- doesn't work via css rule -->
<table class="whole">
<tbody>
<tr>
<td>
<table>
<tr>
<td>abcd</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
在 HTML 中,<tbody>
和 <table>
元素之间必须有一个 <tr>
元素。 Chrome 很不错,因此它可以帮助您插入它。但是,这会破坏您的 CSS,因为现在 <tbody>
是 <table>
的孩子,而不是 <tr>
。
解决方案:
包含一个 <tbody>
(否则它会无效且令人困惑),并将您的 CSS 代码更改为:
table.whole > tbody > tr > td {
padding: 20px 0 20px 0;
}
table {
border: 1px solid black;
}
table.whole > tbody /* ...and put it here. */ > tr > td {
padding: 20px 0 20px 0;
}
<table class="whole">
<tbody> <!-- include a <tbody> element... -->
<tr>
<td>
<table>
<tbody>
<tr>
<td>abcd</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
注意:内联样式之所以有效,是因为它们没有任何随机选择器错误,因为它们正好位于 <tbody>
元素中。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。