我可以在样式表中覆盖元素的内联样式吗？答案

【问题标题】：Can I override an element's inline style in my stylesheet?我可以在样式表中覆盖元素的内联样式吗？
【发布时间】：2012-09-20 21:24:49
【问题描述】：

我想强制我的一个系统上的所有文本都以一种字体类型显示。但是，人们经常粘贴具有各种不同格式的内联样式的文本。

我可以在样式表中覆盖元素的内联样式吗？ '!important' 还不够！

【问题讨论】：

标签： html css

【解决方案1】：

您可以使用 CSS 代码覆盖内联样式，该代码使用 !important 说明符将字体系列分配给所有相关元素，例如

* { font-family: Calibri !important; }

仅设置字体是不够的，例如就在body 元素上，从那时起，内部元素的字体由适用于它们的规则控制。仅当 no CSS 规则在内部元素上设置字体时，内部元素才从其父元素继承字体。

如果有人能够注入具有!important 的内联样式，那么您无法在 CSS 中击败它。您需要使用 JavaScript 操作文档，删除或更改 style 属性。

【讨论】：

【解决方案2】：

内联样式至高无上。

您可以执行此操作，但您需要使用 JavaScript 执行此操作。该代码必须基本上从粘贴的代码中删除所有内联样式语句。无论如何，这是个好主意，你永远不知道人们会粘贴什么。

使用 jQuery：

$('.wrapper *').removeAttr('style');

...您的内容位于具有“包装器”类的 div 中

【讨论】：

【解决方案3】：

您不需要 JavaScript。不管你怎么说，!important 确实够用了。

说明：CSS 规则是根据特定级别选择的，该级别由布局引擎计算得出。 !important 规则不是霸道的修饰语；它只是为特异性层次结构中的相应规则增加了额外的权重。

【讨论】：

如果某些白痴已经在行内样式中使用了 !important 会发生什么？
这是一个公平的观点。我仍然不喜欢你的解决方案，但我收回了我的反对票。
你说得对，!important 应该足够了......但你必须将它设置为* {}。也许考虑改变你的答案更具体 - * { font-family:"Whatevs" !important;}
谢谢，Jezen，在我的例子中，我想我可能想用 jQuery 删除一些格式，但我非常感谢你作为一个例子！ +1

【解决方案4】：

使用 jQuery 删除属性函数应该可以解决问题。

removeAttr( 'style' );

【讨论】：

【解决方案5】：

我对其他两个答案的非特定性质不满意。

* { font-family: Calibri !important; }

有时并不总是有效，您需要更具体一些，例如在处理跨度时

span { font-family: Calibri !important; }

足够具体，因为尽管您增加了价值的重要性。

字体样式的类型也很重要，如果最初的字体样式只是使用诸如 font-family 和 font-size 之类的字体，那么使用

span { font:15px arial,sans-serif; !important; }

不会覆盖

的内联样式

<span style="font-family: Calibri">Hello World</span>

【讨论】：

非常好的想法！但是，就我而言，如果内容编辑器将样式插入到 div 和列表和段落中，而不仅仅是跨度......以及如果他们正在改变颜色和大小，而不仅仅是字体怎么办。看到它变得复杂，这就是为什么这里更 general 解决方案适用于我的情况。 :-)