通过规则的 css 属性（填充）不起作用，而相同的 css 内联应用则有效

Question

I have the following code and cannot figure out why it doesn't work:

 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>

May I misunderstand how the child selector > works or is there some kind of limitation here, or a bug?...

Answer 1

If you inspect your code in the Chrome devtools, you will see that the browser has automatically inserted the required<tbody> element between the <table /> and rows for you. Because of this, the <tr /> is no longer the direct descendent of the <table /> . So the issue is that your HTML is malformed/not adhering to the spec. If you add the <tbody /> element and rewrite your CSS accordingly, it will work just fine:

 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>

Answer 2

In HTML, there must be a <tbody> element between <table> and <tr> elements. Chrome is being nice, so it helpfully inserts it for you. However, that breaks your CSS, because now <tbody> is the child of <table> , and not <tr> .

Solution:

Include a <tbody> (otherwise it would be invalid and confusing), and change your CSS code to:

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>

Note: the inline styles work because they don't have any random selector errors because they're placed right in the <tbody> element.