如何用外部CSS覆蓋內聯樣式？

我有使用內聯樣式的標記，但我無權更改此標記。如何在僅使用CSS的文檔中覆蓋內聯樣式？我不想使用jQuery或JavaScript。如何用外部CSS覆蓋內聯樣式？

HTML：

<div style="font-size: 18px; color: red;"> 
    Hello World, How Can I Change The Color To Blue? 
</div>

CSS：

div { 
    color: blue; 
    /* This Isn't Working */ 
}

來源

2013-05-29 Mr. Alien

爲什麼要使用內嵌樣式，如果你想覆蓋它們？ – BFWebAdmin

+18

@BFDatabaseAdmin他可能無法訪問聲明內聯樣式的標記。 – TylerH

是的，好點。 – BFWebAdmin

120

要只有這樣，才能覆蓋內聯樣式是通過使用CSS規則旁邊!important關鍵字。以下是它的一個例子。

div { 
 
     color: blue !important; 
 
     /* Adding !important will give this rule more precedence over inline style */ 
 
    }

<div style="font-size: 18px; color: red;"> 
 
    Hello, World. How can I change this to blue? 
 
</div>

重要提示：

使用!important不被視爲一個很好的做法。因此，您應該避免!important和內聯樣式。

添加!important關鍵字任何CSS規則允許的規則在所有該元素的其它CSS規則強行先。

甚至覆蓋標記中的內聯樣式。

覆蓋的唯一方法是通過其他!important規則，要麼在後面的代碼中CSS較高的CSS特異性或等於CSS具體聲明。

必讀 - CSS Specificity by MDN

來源

2013-05-29 11:58:03

那麼風格部分它，他實際上沒有必要，他只用於重寫內聯的css –

我知道，但相同我在說！重要只會增加特定房產的分數，他可能會在某些街區使用其他房產（不是重寫） –

爲什麼！重要的不良做法？ – BFWebAdmin

文檔中inline-styles具有最高優先級，因此，例如說，如果你想要一個div元素的顏色改變爲blue，但你有一個inline style與color屬性設置爲red

<div style="font-size: 18px; color: red;"> 
    Hello World, How Can I Change The Color To Blue? 
</div>

div { 
    color: blue; 
    /* This Won't Work, As Inline Styles Have Color Red And As 
     Inline Styles Have Highest Priority, We Cannot Over Ride 
     The Color Using An Element Selector */ 
}

那麼，我應該使用jQuery/Javascript？ - 答案是NO

我們可以使用element-attr CSS選擇器，!important，筆記，!important在這裏很重要，要不然也不會在乘坐內嵌樣式..

<div style="font-size: 30px; color: red;"> 
    This is a test to see whether the inline styles can be over ridden with CSS? 
</div>

div[style] { 
    font-size: 12px !important; 
    color: blue !important; 
}

Demo

注意：使用!important只能在這裏使用，但我用 div[style]選擇具體選擇具有divstyle 屬性

來源

2013-05-29 11:56:11

那麼，我應該使用內聯樣式嗎？ - 答案是**否** :-) – PeeHaa

「那麼，我應該使用jQuery/Javascript嗎？ - 答案是否」爲什麼？如果我在一個環境（如Sharepoint）中將內聯樣式添加到由不可控制的實體添加到元素中，爲什麼我不使用Jquery刪除有問題的內聯樣式，以便我的網站外部主題顯示通過？似乎比爆破更優越的解決方案！對於我以後可能想要在特定實例中重寫的特徵來說很重要。 – Neberu

@Neberu - 因爲JS可以在瀏覽器中被阻止/關閉。使用'！important'不能AFAIK。 – Tony

您可以輕鬆地覆蓋內聯樣式，除了內嵌!important風格

所以

<div style="font-size: 18px; color: red;"> 
    Hello World, How Can I Change The Color To Blue? 
</div> 

div { 
    color: blue !important; 
    /* This will Work */ 
}

但如果你有

<div style="font-size: 18px; color: red !important;"> 
    Hello World, How Can I Change The Color To Blue? 
</div> 

div { 
    color: blue !important; 
    /* This Isn't Working */ 
}

現在這將是red只..你不能覆蓋它

來源

2013-06-24 11:08:33

這與以前幾個月的答案有什麼不同？ – BFWebAdmin

@BFDatabaseAdmin這個答案描述了當內嵌樣式具有'！important'時的行爲，這個點沒有被任何其他答案覆蓋。這可能不是一個完全獨立的答案，但這與所提供的其他答案不同。 – grgarside

但是再次使用重要的內聯樣式實際上是過度殺傷，因爲它默認情況下具有最高的優先級。 – My1

<div style="background: red;"> 
    The inline styles for this div should make it red. 
</div> 

div[style] { 
    background: yellow !important; 
}

下面是鏈接瞭解詳情： http://css-tricks.com/override-inline-styles-with-css/

來源

2014-08-26 06:37:26

這與以前幾個月的答案有什麼不同？ – BFWebAdmin

如果你已經知道答案，也許沒有區別...但對於一些新手，我希望它可以幫助他們......尤其是鏈接，它更詳細...無論如何感謝您的評論。 –

如何用外部CSS覆蓋內聯樣式？

回答

相關問題