css - 将 CSS 规范化/重置应用于单个元素和子元素

Question

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

我知道我可以使用它重置所有元素

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

但后来我失去了所有的造型。我实际上更喜欢使用具有上下文 css 文件的规范化（ http://yuilibrary.com/yui/docs/cssnormalize/ ）。

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

另一个说明性示例。

我有

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

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

score 0 · Accepted Answer

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

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

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

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

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

score 0 · Accepted Answer

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

你可以用更少的方法来做这样的事情：

prefixedCssNormalize.less

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

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

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

2 回答 2