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 }

DEMO

更新：对于完整表格中的边框（classB），您可以试试这个

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

DEMO

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元素，并且您的类都会独立地定位该元素，因为您使用昏迷来分割声明。
此外，范围需要调整：

    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 }