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的路线应该是最后的选择，因为它是样式规则的“王牌”。

Answer 2

您不能强制元素不继承父样式。

但是，您可以覆盖不想更改的所有可能样式。如果您的CSS特异性高于客户特异性，那么您的样式将在页面上占主导地位/表达。

请参阅：

根据您的示例，使用下面的代码将比body声明更具体，因此覆盖：

.widget .container {
    font-family: Arial;
}

Answer 3

您不能破坏样式继承，但是您可以确保您的样式更重要或以正确的顺序加载，以便您的样式出现在最前面。

查看!important标记。

或者，如果您在他们的样式表之后加载您的样式表，您的样式表将采用先例（除非他们是内联的）。你可以在身体加载后使用Javascript来加载你的样式（但是你会得到一个＆＃34;闪烁＆＃34;效果）。

Answer 4

您也可以尝试inline styling。内联样式具有最高优先级。如果客户端覆盖使用导入的样式表，这将起作用。

与其他人提到的一样，另一种选择是!important。

您还可以在http://www.w3.org/TR/CSS2/cascade.html阅读相关规范，其中详细描述了它们的级联方式。如果上面提到的技巧不起作用，也许规格会给你一个线索，或者你肯定会知道这是不可能的。

Answer 5

使用！important css属性被认为是一种不好的做法。因为它引入了优先级冲突的可能性，并且从长远来看使得对css进行故障排除非常困难。

对此问题采用较少侵入性的方法是使用id分隔窗口小部件，并在样式表中使用＆＃34; universal＆＃34;重置一些最重要的样式声明。选择器，例如：

#myWidget *{
  margin: 0;
  padding: 0;
  background: none;
  border: none;
}

例如。然后，专门定义覆盖。