0

我在我编写的一些 CSS/HTML 代码中看到了一个奇怪的结果。我的 CSS 中有两个不同的类；我们称它们为 A 类和 B 类。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 元素中。

我错过了什么？

4

3 回答 3

5

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

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。）

于 2012-10-04T22:31:53.370 回答
0

在您的表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;
}

演示。

于 2012-10-04T22:38:22.867 回答
0

您有几个问题需要解决：

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 }

为了让它正常工作，你应该使用：

请参阅这个工作小提琴示例！

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 }
于 2012-10-04T22:54:20.013 回答