table.class tr, th 和 table.class tr, th 有区别吗？答案

【问题标题】：Is there a difference between table.class tr, th and table .class tr, th?table.class tr, th 和 table.class tr, th 有区别吗？
【发布时间】：2011-09-21 09:05:03
【问题描述】：

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

table .class tr, th{

}

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

我有点假设 css 会忽略 table 和 .class 之间的空间。但真的吗？

table.class tr, th{

}

这会有所不同吗？我不敢相信我以前没有考虑过这个！（尴尬）

谢谢！

【问题讨论】：

标签： html css css-selectors

【解决方案1】：

table .class tr 选择这个：

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

当table.class tr 选择这个时：

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

【讨论】：

【解决方案2】：

您在问题中回答了它：

table .class tr, th... 在 .class element 内选择 tr table 和 th。

table.class tr, th... 在table with the class "class" 中选择tr 和 th。

空间有所不同。

使用空格，您正在选择table 和tr 之间的另一个元素（可能是thead 或tbody？）

如果没有空格，您将选择 table 类 class。

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

【讨论】：

【解决方案3】：

table.foo 选择类为 foo 的表。

table .foo 选择所有具有类 foo 且位于表内的元素。

所以你之前的选择器：

table .class tr, th 选择在具有类class 并且在表格内的元素内的所有trs，以及页面上的所有ths。

【讨论】：

【解决方案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>

还有一个tr：

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

什么都没有：

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

【讨论】：