table.class tr, th 和 table.class tr, th 之间有区别吗？

Question

在很长一段时间里，我都是以这种方式设计我的元素。

table .class tr, th{

} 

今天我遇到了一些与 css 相关的疯狂错误，我发现它可能在过去偶然起作用，事实上它所做的不是选择某个类的表，而是选择表后跟某个类的元素。

我有点假设 css 会忽略 table 和 .class 之间的空格。但确实如此吗？

table.class tr, th{

} 

这会有所不同吗？我不敢相信我之前没有想到这一点！ （不好意思）

谢谢！

Answer 1

table.class tr 选择此：

<table>
    <tbody class="class">
        <tr></tr>
    </tbody>
</table>

而 table.class tr 选择此：

<table class="class">
    <tr></tr>
</table>

Answer 2

您在问题中回答了它：

table .class tr, th... 在 内的 .class 元素 中选择 tr表 和第。

table.class tr, th... 选择 table 中的 tr 类为“class” 和 第。

空间有所不同。

通过空格，您可以在 table 和 tr 之间选择另一个元素（可能是 thead 或 tbody ？）

如果没有空格，您将选择一个带有 class 类的table。

顺便说一句，我不确定你想要这个，但是 , th 意味着“也为所有 th 提供相同的样式”。

Answer 3

table.foo 选择具有 foo 类的表。

table .foo 选择表中具有 foo 类的所有元素。

因此，您之前的选择器：

table .class tr, th 选择具有类 class 且位于表内的元素内的所有 tr ，以及页面上的所有th。

Answer 4

table .class tr 将选择一个 tr：

<table>
  <tbody class="class">
    <tr></tr>
  </tbody>
</table>

但什么也没有：

<table class="class">
  <tr></tr>
</table>

而 table.class tr 将选择一个 tr：

<table class="class">
  <tr></tr>
</table>

AND a tr：

<table class="class">
  <tbody>
    <tr></tr>
  </tbody>
</table>

但什么也没有：

<table>
  <tbody class="class">
    <tr></tr>
  </tbody>
</table>