对单个元素和子元素应用CSS规范化/重置

我有一个插件，需要使用多个主题，而不继承该主题的样式

我知道我可以用这个重置所有元素

 #element, #element * { -- reset css here --}

但是我失去了所有的造型。实际上我更喜欢使用normalize，它有一个上下文css文件

但我如何将此应用于单个div和所有儿童

另一个说明性的例子

我有

    <div id="test-element">
    <table>
    <tbody>
    <tr><td>Test</td></tr>
    </tbody>
    </table>
    </div>

---

我希望该表不继承任何样式-进行规范化。

如果您有css文件，我会说最简单的方法是使用编译的css方法，即：less

您可以使用较少的资源完成类似的操作：

prefixedCssNormalize.less

#test-element {
   /* paste contents of the css normalize here. */
}

使用模板库将css文件粘贴或导入到注释所在的位置

---

当您将less文件编译成css时，cssnormalize中的所有规则都将以test元素作为前缀。从而使结果符合您的要求。

确保在加载其他文件/样式后加载或添加要更新的样式。 最后应用的样式的权重比上一个样式更大

将特定元素的继承样式中和为

#test-element , #test-element * {
/* your normalize code */
}

然后添加新的/更新的样式

但请记住，如果！重要的是，如果使用或继承了父链接，则规范化和应用新样式将是一项繁琐的任务