css：從其他頁面樣式中分離div元素

Question

我有一個瀏覽器擴展，它爲頁面添加了一個div元素（和其他元素）。有沒有辦法確保頁面樣式不會影響添加元素中的樣式？

我已經考慮使其成爲一個iframe中，但寧願不進行額外的調用。確保覆蓋每一種可能的風格也似乎有點多，儘管我添加的信息只是基本的文本和鏈接。

Answer 1

我注意到你說你不喜歡使用各種風格，但我想它可以幫助別人，我應該在這裏提到它的情況。基本上這是一個可以移除大多數繼承/預定義屬性的類。您可以將該類添加到您想要排除的任何元素。這裏有一個例子：

.reset { 
    background:none; 
    border:none; 
    bottom:auto; 
    clear:none; 
    cursor:default; 
    float:none; 
    font-size:medium; 
    font-style:normal; 
    font-weight:normal; 
    height:auto; 
    left:auto; 
    letter-spacing:normal; 
    line-height:normal; 
    max-height:none; 
    max-width:none; 
    min-height:0; 
    min-width:0; 
    overflow:visible; 
    position:static; 
    right:auto; 
    text-align:left; 
    text-decoration:none; 
    text-indent:0; 
    text-transform:none; 
    top:auto; 
    visibility:visible; 
    white-space:normal; 
    width:auto; 
    z-index:auto; 
} 

現在只需添加「復位」，它應該設置其恢復正常。然後，您可以在該行下面定義樣式，並且它們將覆蓋重置類中的樣式。

你也可以通配符選擇添加到復位類，以便爲目標元素的孩子也是如此。

.reset, 
.reset * { /*...etc */ } 

注：Wildcards are supported by IE8+，所以如果你是在IE7或更低的工作 - 沒有骰子。