Question

所以我希望我网站的每个表都具有与

相同的引导样式

class="table table-striped table-hover "

但是我真的不想进入每一张桌子并把它放进去以防万一我以后要改变它。我有没有办法设置，

.table{
  /*Inherit all these classes*/
}

Answer 1

您需要使用LESS或SASS并为此进行混音。如果您不能使用LESS / SASS，如果您绝对需要，可以使用以下内容覆盖.table，如下所示（从BS 3.2中提取）：

/* .table-stripe styling */
.table > tbody > tr:nth-child(odd) > td, 
.table > tbody > tr:nth-child(odd) > th{
    background-color: #f9f9f9;
}

/* Default .table-hover behavior */
.table > tbody > tr:hover > td,
.table > tbody > tr:hover > th {
    background-color: #f5f5f5;
}

/* .table-hover styling for "active". 
    Repeat this block for Success, Info, Warning, Danger, etc. 
    using your preferred colors */
.table > tbody > tr > td.active:hover,
.table > tbody > tr > th.active:hover,
.table > tbody > tr.active:hover > td,
.table > tbody > tr:hover > .active,
.table > tbody > tr.active:hover > th {
    background-color: #e8e8e8;
}

Answer 2

您可以尝试合并

中的所有规则

table table-striped table-hover

将类分为一类但，您还需要捕获table table-striped table-hover child和descendant选择器定位的规则集。所以最终你最终会为自己创造更多的工作。

e.g。如果你在这里查看boostrap CSS源代码 - https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.css#L255

  .table {
    border-collapse: collapse !important;
  }
  .table td,
  .table th {
    background-color: #fff !important;
  }
  .table-bordered th,
  .table-bordered td {
    border: 1px solid #ddd !important;
  }
}

这些子规则也需要重写我已经展示了 3 CSS规则如果您在bootstrap CSS中搜索术语.table，则需要解析 318 实例。

您可以通过编译自己的LESS或SASS来减少这种情况，但您仍然需要处理child和descendant问题。

可能的解决方案

如果你有一个体面的文本编辑器，使用实时模板或像emmet这样的东西，只需创建一个像tab+这样的快捷方式，文本编辑器扩展到table table-striped table-hover

使所有表使用相同的引导类

2 个答案:

可能的解决方案