如何防止我的CSS影響外部插件？

作爲一個例子，我得到了一個CSS類，它適用於我的網站中的所有標籤。如何防止我的CSS影響外部插件？

label 
{ 
font-size: 18px; 
}

現在我安裝一個外部JS插件後，我發現這個插件本身是由我基地的CSS的影響。

<div> 
    <div class="plugin" /> 
    <label>Xyz</label> 
    //Dynamic html inserted by plugin 
</div>

該插件有自己的樣式表，所以我如何防止我的基礎CSS樣式觸摸插件div中的任何元素？

編輯

我必須補充一點，標籤是一個非常簡單的例子。全球風格觸及各種元素，實際佈局更爲複雜。

來源

2012-02-20 Fixer

聽起來像是你需要給你自己的'label' css加上前綴，所以它只適用於你的網站（例如，通過添加一個「#container」div和「#container label」），或者修改插件CSS來補償你的主要CSS。 – 2012-02-20 12:04:41

不要讓你的css過於籠統，當你只想要設計一些你的元素時，儘量做到儘可能具體。如果你不能在不影響插件元素的情況下選擇你的元素，可以向他們添加一個類。

label{ /* too general, don't use this */ 
/* ... */ 
} 
body > div > form > label{ /* more specific, but maybe still affecting your plugin */ 
/* ... */ 
} 

label.noplugin{ /* use a class on non-plugin elements */ 
/* ... */ 
} 

div:not(.plugin) > label{ /* affecting only children of div which are NOT 
    tagged with the plugin class */ 
/* ... */ 
}

所以你的情況有更好的方式風格你的標籤會

<div> 
    <div class="plugin"> 
    <label>Xyz</label> 
    //Dynamic html inserted by plugin 
    </div> 
</div>

CSS：

*:not(.plugin) > label 
{ 
font-size: 18px; 
}

請注意，:not是不幸not supported by IE ≤8。

來源

2012-02-20 12:09:16 Zeta

不幸的是，它是一個繼承的網站，所以CSS已經寫好了。努力改變現有的CSS。希望有一些東西可以重新設置插件CSS插入之前的CSS樣式... – Fixer 2012-02-20 12:17:44

@Fixer：Ouch，那麼你可能註定要失敗。你可以用'.plugin'來標記你的插件元素，並用特定的值重新設置每個元素，但這會花費很多時間。 – Zeta 2012-02-20 12:21:16

@Fixer - CSS的重點在於它很容易改變（改變你的網站的樣式而不改變你的HTML結構等）。如果你不想改變你的CSS文件，我不認爲你能做的事情很多。這很簡單，如果您需要幫助進行更改，您可以打開另一個堆棧溢出問題。 – 2012-02-20 12:21:36

你需要做兩件事。

我）給你父容器ID

II）和集裝箱的風格子標籤。

這裏是fiddle workout。

來源

2012-02-20 12:14:40

+1爲小提琴演示和代碼。 – Sarfraz 2012-02-20 12:26:42

如何防止我的CSS影響外部插件？

回答

相關問題