CSS选择器未正确应用

Question

在我编写的一些CSS/HTML代码中，我看到了一个奇怪的结果。我的CSS中有两个不同的类；我们称它们为classA和classB。A类将表格定义为没有边框：

div.classA table, th, td { borders:none }

类B将表格定义为具有折叠的灰色边框：

div.classB table, th, td  { border:1px solid grey }

然后我的HTML就会有

<div class="classB">
  <table>
    <thead>
      <th>Text</th><th>More text</th>
     </thead>
  </table>
</div>

表格标题(因为classB应该有边框)没有边框。当我使用Firefox检查页面时，它显示classA覆盖了classB的设置，即使该表位于classA div元素中。

我遗漏了什么？

Answer 1

您的选择器不太正确。我想你想要的是：

div.classA table, div.classA th, div.classA td { border: 0; }

div.classB table, div.classB th, div.classB td  { border: 1px solid grey; }

(您需要在每个标记之前添加div.classname。)

Answer 2

在您的表的thead中没有td，而是th，为了仅将样式应用于您可以使用的th

div.classA table thead th { border:none }
div.classB table thead th { border:1px solid grey }

。

更新:全表中边框的 (classB)您可以尝试此操作

div.classB table{
    border-collapse:collapse;
}
div.classB table th, div.classB table td { 
    border:1px solid grey;
}

。

Answer 3

您有几个问题需要解决：

1

您没有正确使用HTML标记：

<div class="classB">
  <table>
    <thead>
      <th>Text</th><th>More text</th>
     </thead>
  </table>
</div>

应该是：

<div class="classB">
  <table>
    <thead>
      <tr><th>Text</th><th>More text</th></tr>
     </thead>
  </table>
</div>

2

你把“边框”和“边框”拼错了：

    div.classA table, th, td { borders:none }

应该是：

    div.classA table, th, td { border:none }

3.

边框被设置为td元素，并且通过您的类，两者都独立地指向该元素，因为您使用coma来拆分声明。

此外，还需要调整范围：

    div.classA table, th, td { border:none }
    div.classB table, th, td { border:1px solid grey }

应该是：

    div.classA table th, div.classA table td { border:none }
    div.classB table th, div.classB table td { border:1px solid grey }

要让所有功能都正常工作，您应该使用：

请看这个working fiddle example！

HTML

<div class="classA">
  <table>
    <thead>
      <tr><th>Text</th><th>More text</th></tr>
    </thead>
  </table>
</div>
<br>
<br>
<div class="classB">
  <table>
    <thead>
      <tr><th>Text</th><th>More text</th></tr>
    </thead>
  </table>
</div>

CSS

div.classA table th, div.classA table td { border:none }
div.classB table th, div.classB table td { border:1px solid grey }