Question

假设我有一些这样的HTML - ：

<div style="blah...blah">Hey Nice</div>
<a style="blah...blah">Great</a>

如果我不知道所有内联样式的存在，如何删除应用于样式表中上述元素的所有内联样式。目前我正在尝试这个，但是徒劳 - ：

div[style], a[style]{ !important }

Answer 1

您必须为具有style属性的元素重置所有 css属性：

[style] {
    position: static !important;
    float: none      !important;
    border: 0 none   !important;
    margin: 0        !important;
    padding: 0       !important;
    outline: 0 none  !important;
    // and so on
}

Answer 2

在任何情况下，有几个决定因素决定哪个CSS属性占优势。按顺序，这些是：

属性值是否具有!important标志。
如果样式声明通过style属性内联应用。
CSS规则选择器的强度
- 如果规则有任何ID条款，如果有，有多少
- 如果规则有class，attribute或伪类子句，如果有，有多少
- 如果规则有任何tagname子句，如果有，有多少
如果稍后在源中解析属性而不是具有相同强度规则的另一个属性

因此，覆盖属性的唯一方法是确保通过style应用的所有属性都应用于样式表中的其他位置，并具有!important声明。执行此操作的最合理方法仍然非常尴尬 - 它将涉及应用非常特定的重置样式表，并在每个规则的每个属性上包含!important。

但即使这样做，您仍然无法覆盖自己style的内联!important声明。

您已经告诉Mojtaba应该有更好的解决方案，但更好的解决方案是设计CSS来打破自己的规则。想象一下，如果有一个更简单的解决方案来覆盖设计成CSS语言的样式表中的内联样式 - 是否还有另一种解决方案可以简单地覆盖内联样式的覆盖？循环在哪里结束？总而言之，我建议使用Javascript或放弃。或者更详细地描述您的具体问题 - 可能还有另一种解决方案！

Answer 3

如果你不满意在CSS中使用！重写覆盖（正如其他人在这里所建议的那样），唯一的方法就是使用JavaScript来删除样式。

这在jQuery中非常简单（如果你能够为元素分配类名以便选择它，那就更好了）：

$('.selector').attr('style', '');

这将简单地将元素的'style'属性替换为nothing，从而删除内联样式。

这并不理想，因为它依赖于启用了JavaScript的访问者，并且可能会导致访问者在页面加载时看到样式“flash”：在JS之前为元素内联指定的样式踢开并移除它。

使用CSS从具有内联样式的元素中删除所有样式

3 个答案: