2013-02-18 89 views
2

我正在構建一個JavaScript插件/ CSS表單,它必須覆蓋頁面的原始樣式(該插件可以使任何靜態網站響應)。內聯CSS是否覆蓋頁面底部的樣式表?

目前,如果我有這樣的:

<body id="home"> 
    <div style="width:900px; background:green; height:500px; margin:0 auto;"> 
     <div style="width:400px; background:blue; height:300px;" 
      <p>Hello hello hello hello hello hello</p> 
     </div> 
    </div> 
    <div style="width:800px; background:green; height:500px;"> 
     <div style="float:left; width:400px; background:blue; height:300px;" 
      <p>blah blah blah blah blah</p> 
     </div> 
    </div> 
    <link rel="stylesheet" href="css/jq_responsive.css" > 
    <script src="js/main.js"></script> 
</body> 

我jq_responsive.css樣式並不優先於內嵌樣式。如果我將inline樣式放置在文檔的<head><style>標記中,則應用指向jq_responsive.css文件覆蓋的所有樣式的類。但是,這不是我的目的。

!important我可以在這裏覆蓋的唯一方法嗎?我想盡可能避免這種情況。

+0

我可以問你,你爲什麼甚至使用內聯樣式? – sascha 2013-02-18 08:10:00

+0

它只能由!重要 – 2013-02-18 08:13:16

+0

覆蓋一般規則是最後遇到的css規則優先,所以在這種情況下,css文件優先重複樣式屬性。 – 2013-02-18 08:15:01

回答

5
特異性

新月爲了

下選擇的列表是通過增加特異性:

  • 通用選擇
  • 類型選擇
  • 類選擇
  • 屬性選擇
  • 僞類
  • ID選擇
  • 內嵌樣式

https://developer.mozilla.org/en-US/docs/CSS/Specificity

!重要的可能是CSS的唯一辦法,或者你可以使用JavaScript來刪除內聯CSS

+0

有趣。我想我不得不把內聯CSS與JavaScript並將其放入一個CSS文件,然後從內聯刪除它。 !在這種情況下重要的不起作用,因爲樣式並不總是優先考慮的,只比內聯樣式更重要。 – Jascination 2013-02-18 12:47:13