css - 当表格在类内时如何覆盖默认表格样式？

Question

我有两种不同的表格样式定义：

table {
border: solid 1px #E8EEF4;
border-collapse: collapse;
}

因为我的特定表在里面，所以<div class="checkboxquestion>我对这个类中的表有一个特殊的样式定义：

.checkboxquestion table
{
    border: none;
    text-align: center;
}

问题是，它border: none;被border-collapse: collapse;- 覆盖，并且所有其他样式选项都被“默认”定义覆盖。

我该如何解决这个问题？

score 2 · Accepted Answer

我认为你犯了另一个错误，它对我有用，就像你做的那样：看看这个小提琴

也许您没有像在问题中那样关闭 div 类的引号？

score 1 · Accepted Answer

div.checkboxquestion table也是一种选择；）

并确保特定定义出现在通用定义之后。

score 0 · Accepted Answer

创建一个新类并将其应用于 .checkboxquestion 内的表

像：

table, .tabelClass {
border: solid 1px #E8EEF4;
border-collapse: collapse;
}

然后将其应用于您的表：

<table class="tabelClass">

score 0 · Accepted Answer

不要进入特异性战争，尤其是与你自己。使用 table、tr、td 等选择器定义所有常见的表格样式。
如果您有两种不同样式的表格，请给它们两个不同的类。

如果这是“一次性的事情”，并且您确实需要一切都相同：

.checkboxstyle table {
 border-collapse: separate;
 text-align:center;
 border:none;
}

我不能 100% 确定您要做什么，但是如果您要使边框不可见，则只用背景颜色为边框着色会更容易。

.checkboxstyle table {
 border-color:blue;
}

您可以在此处了解有关特异性的更多信息： http ://htmldog.com/guides/cssadvanced/specificity/ 请记住，阅读后立即忘记所有内容，因为您不想计算特异性。如果你发现你正在这样做，那么你正在编写糟糕的 CSS。

4 回答 4