对单个元素和子元素应用CSS normalize / reset

Question

我有一个插件，需要与多个主题工作，而不继承该主题的样式。

我知道我可以用这个

重置所有元素

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

但是我失去了所有的样式。我实际上更喜欢使用normalize (http://yuilibrary.com/yui/docs/cssnormalize/)，它有一个上下文css文件。

但是我如何将它应用到单个div和所有子div上呢?

另一个说明性的例子。

我有

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

我希望表不继承任何样式-要规范化

Answer 1

如果你有css文件，我想说最简单的方法是使用编译的css方法(即:less)。

你可以使用less:

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

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

当你将less文件编译成css时，cssnormalize中的所有规则都将以#test-element为前缀。从而得到您想要的结果。

Answer 2

确保要更新的样式是在加载其他文件/样式之后加载或添加的。最后应用的样式比之前更有分量。

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

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

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

但是请记住，如果使用了!important或继承了父链接，那么规范化和应用新样式将是一项繁琐的任务。