0

假设我有一些这样的 html -:

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

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

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

3 回答 3

1

您必须重置具有属性的元素的所有stylecss属性：

[style] {
    position: static !important;
    float: none      !important;
    border: 0 none   !important;
    margin: 0        !important;
    padding: 0       !important;
    outline: 0 none  !important;
    // and so on
}
于 2013-05-13T11:37:17.743 回答
0

有几个决定因素决定了在任何情况下哪个 CSS 属性占主导地位。按顺序，这些是：

  1. 属性值是否有!important标志。
  2. 如果样式声明通过style属性内联应用。
  3. CSS 规则选择器的强度
    • 如果规则有任何 ID 子句，如果有，有多少
    • 如果规则有类、属性或伪类子句，如果有，有多少
    • 如果规则有任何标记名子句，如果有，有多少
  4. 如果该属性在源中被解析得晚于另一个具有相同强度规则的属性

因此，覆盖属性的唯一方法是确保通过应用的所有属性style都应用在样式表的其他位置，并具有!important声明。最合理的方法仍然很尴尬——它需要应用一个非常具体的重置样式表，并包括!important每个规则的每个属性。

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

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

于 2013-05-13T11:51:23.507 回答
0

If you're not happy with using !important overwrites in the CSS (as suggested by others on here), the only way would be to use JavaScript to remove the styles.

This is really easy in jQuery (better if you're able to assign a class name to the elements to select it with):

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

This will simply replace the element's 'style' attribute with nothing, thus removing the inline styles.

This isn't ideal though since it will rely on the visitor having JavaScript enabled, and may well result in the visitor seeing a style 'flash' as the page loads: the styles assigned in-line to the element before the JS kicks in and removes it.

于 2013-05-13T12:07:36.453 回答