css - 如何打破 CSS 继承？

Question

我创建了一个网络小部件。我的客户放在他们的网站上。基本上在加载时它会调用 web 服务并加载特定于客户端的数据。

结果它看起来像：

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

我动态地将 CSS 样式应用于我的小部件类。看起来与我们的企业风格一致。

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

例如，如果客户有，它会覆盖我的样式：

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

有没有办法打破继承？只是说具有类小部件样式的任何 div 都不会继承父样式。

score 10 · Accepted Answer

我不认为你可以打破 CSS 继承，但你可以尝试通过遵循 CSS 特异性规则来规避它。

一篇好的特异性文章

尝试!important在小部件中添加样式以使其具有比默认样式更高的特异性。

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

编辑

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

我希望这会有所帮助！

编辑2

请注意，添加路径!important应该是最后的手段，因为它是样式规则的“王牌”。

score 2 · Accepted Answer

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

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

看：

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

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

score 1 · Accepted Answer

您不能这样破坏样式继承，但可以确保您的样式更重要或以正确的顺序加载，以便您的样式排在首位。

看看!important标签。

或者，如果您在他们的样式表之后加载您的样式表，那么您的样式表将成为先例（除非他们的样式表是内联的）。您可以在正文加载后使用 Javascript 加载样式（但是您会得到“闪烁”效果）。

score 1 · Accepted Answer

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

就像其他人提到的那样，另一种选择是!important.

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

score 1 · Accepted Answer

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

解决这个问题的一个不那么侵入性的方法是用一个 id 来分隔你的小部件，并在你的样式表中，使用“通用”选择器重置一些最重要的样式声明，例如：

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

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

5 回答 5