如何打破CSS继承？

Question

我创建了一个Web小部件.我的客户放入他们的网站.基本上在加载时它调用webservice并加载特定于客户端的数据.

结果看起来像:

<div class="widget">
   <div class="container">
   </div>
</div>

我动态地将CSS样式应用于我的widget类.与我们的企业造型保持一致.

问题是当客户端应用程序样式覆盖我应用运行时的样式时.

例如,如果客户端有,它会覆盖我的样式:

body {
  margin: 0 auto;
  padding: 0;
  width: 90%;
  font: 70%/1.4 Verdana, Georgia, Times, "Times New Roman";
}

有没有办法打破继承？只是说类窗口小部件样式的div没有继承父样式.

Answer 1

我不认为你可以破解CSS继承,但你可以尝试通过遵循CSS特性的规则来规避它.

一篇很好的专业性文章

尝试添加!important窗口小部件中的样式,使其具有比默认样式更高的特异性.

#myWidget{
    font: 100%/1 "Times New Roman", Serif !important;
}

编辑

如果客户端也在使用!important它可能会导致问题.如果您可以通过示例设置jsFiddle.com,我们可以帮助您找到问题.

我希望有所帮助!

EDIT2

注意,走向添加的路线!important应该是最后的手段,因为它是样式规则的"王牌".