如何清除这些样式

Question

我正在使用第 3 部分 bootstrap 主题，它通过 "smart-form" class 为表单定义了一个漂亮的 UI。我需要将一个 DataTable 合并到表单中，而该 DataTable 看起来一团糟。我的 html 看起来有点像这样：

<form class="smart-form">
   .... form controls ....
   <div class="data-table">....</div>
   .... form controls ....
</form>

我将问题追溯到 smart-form 应用于 datatable 的这些样式：

.smart-form *, .smart-form :after, .smart-form :before {
    margin: 0;
    padding: 0;
    box-sizing: content-box;
    -moz-box-sizing: content-box;
}

如果在 Chrome 中取消选中这些样式，我的数据 table 看起来不错。

我可以将某些样式应用于数据 table DIV 以防止这些样式以智能形式传播到数据 table 吗？

谢谢。

Answer 1

问题出在.smart-form *。 *表示.smart-form内的所有元素。您需要解决以下问题：

  .smart-form > *:not(.datatable *)

这意味着：.smart-form 内的所有子项与 .datatable

内的所有元素都不匹配

Answer 2

您可以尝试使用 inherit 规则取消应用的样式：

.smart-form .data-table,
.smart-form .data-table *, 
.smart-form .data-table :after, 
.smart-form .data-table :before {
    margin: inherit;
    padding: inherit;
    box-sizing: inherit;
    -moz-box-sizing: inherit;
}

如何清除这些样式

How to clear these styles

css

datatables-1.10