通过规则的 css 属性（填充）不起作用，而相同的 css inline-applied 可以答案

【问题标题】：css properties (padding) via a rule doesn't work, whereas same css inline-applied does通过规则的 css 属性（填充）不起作用，而相同的 css inline-applied 可以
【发布时间】：2021-07-23 21:12:09
【问题描述】：

我有以下代码，但无法弄清楚为什么它不起作用：

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>

我可能误解了子选择器> 的工作原理，还是这里有某种限制，或者是一个错误？...

【问题讨论】：

你有浏览器添加的tbody元素table.whole > tbody > tr > td
是的，我看到了，但我没有怀疑该规则会在之后应用！确实，通过添加> tbody 就可以了，谢谢（我也会在 html 中添加<tbody>）
尽量不要使用> 选择器。每当HTML发生变化时，您的样式就会中断..这不应该。更好的是在 td 元素中添加一个 css 类。
@SudiptoRoy 好的，这是模板中的包装器，用于在 Outlook 客户端中读取的内部电子邮件......否则我什至不会使用表格！碰到这个问题，我确实想到了使用一个类，但也想了解我遇到的问题......但是是的，你肯定是对的，它更冒险！

标签： html css

【解决方案1】：

在 HTML 中，<table> 和 <tr> 元素之间必须有一个 <tbody> 元素。 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> 元素中。

【讨论】：

stackoverflow.com/questions/3078099/… 声明并非在所有情况下都强制使用它...但是如果需要，我将来会使用它，或者在这种情况下避免使用> 选择器。
是的，但是 Chrome 会为您提供它，并且您应该使用它，否则您可能会遇到意外错误。如果你不使用> 选择器，它可能会选择嵌套表。
是的，我的意思是改用一个类，不仅不使用它 ...

【解决方案2】：

如果您在 Chrome 开发工具中检查您的代码，您会看到浏览器已自动为您在 <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>，谢谢 :-)