2013-05-13 73 views
0
具有內嵌的造型元素刪除所有造型

假設我有一些HTML這樣的 - :使用CSS

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

如何刪除所有應用到我的樣式表中的上述元素的內嵌樣式考慮我不不知道所有內聯樣式的存在。 目前,我想這一點,卻徒勞無功 - :

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

可能的重複[如何刪除CSS元素樣式內嵌(無JavaScript)?](http://stackoverflow.com/questions/2148115/how-can-i-remove-css-element-style-inline-沒有-javascript) – lifetimes 2013-05-13 11:36:06

回答

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 
} 
+1

但它們中有很多。應該有更好的解決方案 – sanchitkhanna26 2013-05-13 11:37:47

0

有確定哪些CSS屬性的幾個決定性因素在任何情況下都佔上風。順序如下:

  1. 屬性值是否具有!important標誌。
  2. 如果通過style屬性內聯應用樣式聲明。
  3. 的CSS規則選擇
    • 如果規則有任何ID條款的強度,如果是的話有多少
    • 如果規則有類,屬性或僞類的條款,如果是的話有多少
    • 如果規則有任何標記名的條款,如果是的話有多少
  4. 如果屬性後面的源解析比同樣強度的規則另一個屬性

因此,覆蓋屬性的唯一方法是確保通過style應用的所有屬性都應用於樣式表中的其他位置,並且具有!important聲明。這樣做的最合理的方式仍然非常尷尬 - 它將涉及應用一個非常具體的重置樣式表,並且在每個規則的每個屬性上包括!important

但即使這樣做了,仍然無法覆蓋內聯style自己有!important的聲明。

你已經告訴Mojtaba應該有更好的解決方案,但更好的解決方案將涉及設計CSS來打破自己的規則。想象一下,如果有一種更簡單的解決方案來從設計爲CSS語言的樣式表中覆蓋內聯樣式 - 是否還有另一種解決方案可以簡單地覆蓋內聯樣式的重寫?循環結束於何處?總而言之,我建議使用Javascript或放棄。或者更詳細地描述你的具體問題 - 可能有另一種解決方案!

0

如果你不喜歡在CSS中使用重要的覆蓋(正如其他人所建議的那樣),唯一的方法是使用JavaScript來移除樣式。

這是jQuery中很容易(更好,如果你能一個類名分配給元素與選擇它):

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

這將只需更換元素的「風格」沒事屬性,從而刪除內聯樣式。

這並不理想,但因爲它將依賴於啓用了JavaScript的訪問者,並且可能導致訪問者在頁面加載時看到一個樣式'flash':樣式分配給元素之前的元素JS踢進並移除它。