Question

这是我的CSS：

.errortable table {
  width: 716px; /* 140px * 5 column + 16px scrollbar width */
  border-spacing: 0;
}

.errortable tbody, thead tr { display: block; }

.errortable  tbody {
  height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
}

.errortable  tbody td, thead th {
  width: 140px;
}

.errortable  thead th:last-child {
  width: 156px; /* 140px + 16px scrollbar width */
}

它会按预期影响我的目标表，但是，它会影响具有完全不同类的OTHER表。

它特别影响所有其他表的第一个td，无论它们的类如何。

第一个td变得非常宽。

我注意到，当我移除.errortable tbody, thead tr { display: block; }

时，其他表恢复为正常外观

我的问题是，为什么错误表的css影响到specialtable类，所以css中的问题是它使它成为全局的而不是特定于类的？

Answer 1

.errortable  tbody td,
thead th {
  width: 140px;
}

您的选择器定位到所有td元素的后代tbody元素，这些元素是errortable类和所有th元素的后代thead元素的后代元素。

对于后半部分，您没有规则说它们必须是errortable类元素的后代。

为什么此特定于类的CSS会完全影响其他类？

1 个答案: