如何清除这些样式答案

【问题标题】：How to clear these styles如何清除这些样式
【发布时间】：2015-09-08 15:00:31
【问题描述】：

我正在使用第三部分引导主题，它通过“智能表单”类为表单定义了一个漂亮的 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 中我取消选中这些样式，我的数据表看起来不错。

我可以对数据表 DIV 应用一些样式以防止这些样式以智能形式传播到数据表吗？

谢谢。

【问题讨论】：

你能编辑主题的样式表吗？或者插入您自己的样式表来覆盖主题？还是给 div 添加样式属性？
我可以插入自己的样式表并覆盖样式。

标签： css datatables-1.10

【解决方案1】：

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

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

这意味着：.smart-form 中的所有子元素与 .datatable 中的所有元素都不匹配

【讨论】：

这行得通——我必须用星号添加 not(.datatable *)。唯一的问题是我必须修改那个第 3 方样式表，所以如果供应商更新，更改将会丢失。我希望有一种方法可以在我自己的样式表中覆盖它，但我找不到这样做的方法。
@user1044169，参见the answer from @dfsq，这样您就不必编辑第三方样式表了。

【解决方案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;
}

【讨论】：

确保在 3rd 方样式表之后包含这些规则。