僅在一個div上阻塞單個樣式表中的樣式

Question

我在頁面上有一個div。問題是，它繼承了全局樣式（樣式表A），例如全局ul和表樣式，但是我希望這個單獨的div不這樣做。我需要有問題的div 只有從另一個樣式表（樣式表B）獲取它的樣式。目前他們正在發生衝突。

有沒有辦法做到這一點而不必以任何方式觸摸樣式表A？這是因爲樣式表A控制了我網站的所有主要樣式，並且該網站足夠大，以至於更改可能會破壞某些內容。有問題的div擁有與網站無關的數據，因此不需要樣式表A.

我正在使用JavaScript Prototype如果有幫助嗎？沒有Jquery請:)

使用iframe怎麼樣？這是一個有效的解決方案，它將如何工作？

非常感謝所有幫助。

Answer 1

也許這樣做是簡單地計算出每一個樣式屬性的DIV從樣式表A繼承，然後手動覆蓋使用樣式表B.

這些樣式如果你想要把DIV到iframe最簡單的方法，那也應該可以。您需要該div來擁有自己的HTML文件，並將其託管在與主頁相同的域中（否則您將遇到安全問題）。鏈接到div頁面中的stylesheetB，它會起作用。但是，在設置iframe的樣式時，您會遇到一些問題。由於您無法從父文檔讀取子文檔中的CSS屬性，因此您必須將iframe設置爲固定的寬度和高度，這在很多情況下都是有限的。我想你可以讓iframe滾動，但這可能不是你想要的。

我認爲要做到這一點的最好辦法是使用Chrome檢查元素，或Firefox中的Firebug來看看CSS繼承股利正在接收，然後

Answer 2

任何重複的風格總是適用的最後一個讀。

假設在樣式表A中有這樣的樣式：.class { background-color: red; }，B：.class { background-color: blue; }中的這一樣式。

所以，如果你在呼喚你的樣式表A B前：

<link href="sheet_a.css" rel="stylesheet" type="text/css" /> 
<link href="sheet_b.css" rel="stylesheet" type="text/css" /> 

然後應用該樣式將.class { background-color: blue; }，因爲它是最後一個瀏覽器閱讀。如果這不起作用（如果樣式表是以不同的順序調用的，或者A中的樣式比B中的樣式更具體，那麼A仍然在應用），那麼可以使用!important tag 。

.class { background-color: blue !important; }會覆蓋A中的樣式，只要它不具有！在原始樣式中也是重要的。

如果只有一個要更改的元素，則不一定需要新的樣式表。您可以在HTML頭中的<style></style>標籤之間或內聯元素（<div style="background-color: blue;"></div>）之間擁有新樣式。內聯元素比外部表單上的元素更具相關性。

Answer 3

您可以在HTML結構使用inline styles或者你可以在你想在樣式表b覆蓋上樣式表一樣式規則添加!important。

例如在樣式表b你會做到以下幾點：

.element {background:red !important}