從元素中刪除/重置繼承的CSS

我知道這個問題之前曾被問到過，但在將其標記爲重複之前，我想告訴您，我的情況與我在互聯網上發現的情況有點不同。從元素中刪除/重置繼承的CSS

我正在構建和嵌入腳本，人們可以將它放在他們的網站上。該腳本創建一個具有特定寬度/高度的div，並在其中包含一些信息。

我的問題是，一些網站聲明div的樣式也是由我的div繼承的。

例如：

div{ 
    background-color:red; 
}

所以如果我不設置任何背景顏色爲我的DIV，它會顯示紅色的，即使我不希望出現這種情況。

我來過的唯一解決方案是覆蓋儘可能多的css屬性，這樣我的div將顯示完全符合我的要求。這個解決方案的問題是，有太多的css屬性來覆蓋，我希望我的腳本儘可能輕。

所以我的問題是如果你知道我的問題的另一種解決方案。它可以在css/javascript/jQuery中。

感謝

來源

2011-09-13 Doua Beri

如何給自己的DIV一個類，然後提供相應的樣式表，你的div的用戶可以包括或連接到現有的樣式表的末尾。通過這種方式，您可以提供所需的所有默認格式，但爲用戶提供的額外優勢是，如果需要，他們可以修改默認設置。我知道這並不比您想要內聯的樣式輕，但它更靈活，因此對您的用戶有更大的好處。我見過以這種方式工作的jQuery插件。 – nnnnnn

「復位」特定元素的樣式是不可能的，你必須覆蓋所有的風格，你不希望/需要。如果你直接用CSS或使用jquery來應用樣式取決於你更容易（但我不會推薦使用javascript/jquery，因爲這是完全不需要的）。

如果您的div是可以包含到其他網站的某種「小工具」，那麼您可以嘗試將其包裝到iframe中。這將「重置」樣式，因爲它的內容是另一個文檔，但是這可能會影響你的小部件的工作方式（或者可能完全破壞它），所以這可能不適用於你的情況。

來源

2011-09-13 07:33:29 oezi

我在想iframe，但就像你說的那樣會導致我遇到比這個更重要的其他問題。 –

但是我認爲組織你的風格總是一個更好的解決方案，但我知道有時你必須應用一個快速修復。所以我認爲從我的可怕的角度來看，這個問題對你的情況更好：http://stackoverflow.com/questions/15901030/reset-remove-css-styles-for-element-only – lKashef

-1

一個簡單的方法是在css中使用!important修飾符，但是這可以以與用戶相同的方式被覆蓋。

也許一個解決方案可以通過遍歷整個DOM來找到你的（重新）定義的類和刪除/強制CSS樣式來實現。

來源

2011-09-13 07:34:09

只要它們是類和id等屬性，就可以通過javascript/jQuery類修飾符將它們刪除。

document.getElementById("MyElement").className = "";

除了覆蓋它們（或使用其他元素），沒有辦法刪除特定的標籤CSS。

來源

2011-09-13 07:37:30 AlexBay

試試這個：創建一個簡單的div沒有任何樣式或內容的紅色div以外。現在，您可以使用循環遍歷所有樣式的div，然後將其分配給您的內部div以重置所有樣式。

當然，如果某人爲所有div s分配樣式（即不使用類，CSS將爲div { ... }），則這不起作用。

像這樣的問題通常的解決方案是給你的div一個不同的類。這樣，網站的網頁設計師可以調整您的div的樣式，以適應設計的其餘部分。

來源

2011-09-13 07:38:16

只設置相關/重要的CSS屬性。

例（只改變可能會導致你的div來看看完全不同的屬性）：

background: #FFF; 
border: none; 
color: #000; 
display: block; 
font: initial; 
height: auto; 
letter-spacing: normal; 
line-height: normal; 
margin: 0; 
padding: 0; 
text-transform: none; 
visibility: visible; 
width: auto; 
word-spacing: normal; 
z-index: auto;

選擇一個非常具體的選擇，如div#donttouchme，<div id="donttouchme"></div>。此外，您可以在聲明中的每個分號前添加`！important。當這個選項失敗時，你的客戶故意試圖搞亂你的佈局。

來源

2011-09-13 08:20:14

你可以嘗試覆蓋CSS和使用自動

我不認爲這將與色彩工作具體，但我遇到了一個問題，我有一個父屬性，如

.parent { 
    left: 0px; 
}

然後我就可以用類似於

.child { 
    left: auto; 
}

來定義我的孩子，並且它有效地「重置」屬性。

來源

2013-11-20 20:24:42 Seth

更具體地設置屬性爲它的默認值（'auto'不可用，如顏色）。它不會取消設置繼承的值，只是明確地將其返回到默認值。 – STW

你可以使用下面的選項。

<style> 
    div:not(.no_common_style){ 
     background-color:red; 
    } 
</style>

現在，如果他們的地方，你不希望應用可以使用「no_common_style」類作爲類的默認樣式的任何地方。例如：

<div class="no_common_style"> 
    It will not display in red 
</div>

來源

2014-06-28 10:51:41 bharatpatel

據我瞭解，你要使用從不用上課，但你繼承一個div。正如在前面的回覆中提到的，你不能完全重置div繼承。然而，這個問題對我來說有效的是使用另一個元素 - 一個不常用，當然不會在當前html頁面中使用的元素。一個很好的例子就是使用，而不是定製它看起來就像你的理想。

area { background-color : red; }

來源

2015-11-08 19:51:10

從元素中刪除/重置繼承的CSS

回答

相關問題