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> 元素中。