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

Question

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

我知道我可以使用此

重置所有元素

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

然后我放松了所有造型。我实际上更喜欢使用带有上下文css文件的normalize（http://yuilibrary.com/yui/docs/cssnormalize/）。

但是我如何将它应用于单个div和所有孩子。

另一个说明性的例子。

我有

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

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

Answer 1

如果您有css文件，我会说最简单的方法是使用编译的css方法（即：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或继承父智能链接，那么规范化和应用新样式将是一项繁琐的工作。