如何破坏CSS继承？

我已经创建了一个Web小部件。我的客户放入他们的网站。基本上负载它调用Web服务并加载特定于客户端的数据。如何破坏CSS继承？

因此，它看起来像：

<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都不会继承父类型。

来源

2012-08-07 German

您可能想要尝试每一块CSS上的！important标记。它会覆盖任何不重要的东西。 – ntgCleaner 2012-08-07 17:04:08

只需在iframe中运行小部件 – Esailija 2012-08-07 17:06:24

我不认为你可以按照说法来破坏CSS继承，但你可以尝试遵循CSS特殊性的规则来绕过它。

特异性好文章

http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

尝试增加!important到风格的小部件给它比默认样式较高的特异性。

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

编辑

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

我希望有帮助！

EDIT2

注意，打算加入!important的路线应该是最后的手段，因为它的样式规则的“王牌”。

来源

2012-08-07 17:03:23 jmbertucci

我试图给我的样式添加重要的标签，但仍然客户端样式优先于我的样式。 – German 2012-08-07 17:07:27

这仍然可以归结为特殊性问题。我会用更多的解释更新我的答案。但我会建议快速阅读该文章。它会帮助你计算你的CSS文件的特异性，并使其高于客户端的样式。 – jmbertucci 2012-08-07 17:10:01

你不能像这样破坏样式继承，但是你可以确保你的样式更重要，或者按照正确的顺序加载，这样你的样式就显得很重要。

看看!important标签。

或者，如果你的样式表在你的样式表之后加载你的样式表（除非它们是内联的）。你可以使用Javascript来加载你的样式后身体已经加载（但是，你会得到一个“闪烁”的效果）。

来源

2012-08-07 17:03:09

我试图添加对我的样式很重要的标记，但仍然客户端样式优先于我的样式。 – German 2012-08-07 17:04:23

如果他们也使用重要的标签，那么你运气不好，恐怕没有使用一些JavaScript来删除他们的风格。 – 2012-08-07 17:08:40

您不能强制元素不继承父类型。

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

请参见：

CSS Specificity via css-tricks.com

根据您的使用如下面的代码会比body声明更具体，从而覆盖：

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

来源

2012-08-07 17:08:48 PJH

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

和其他人一样，另一种选择是!important。

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

来源

2012-08-07 17:10:40 Nasir

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

一个缺少强制的方法解决这个问题是一个id来界定你的小部件，并在样式表中，重置的一些最重要的样式声明中使用的“通用”选择，如：

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

例如，

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

来源

2015-10-22 07:49:05 Argo

如何破坏CSS继承？

回答

相关问题