如何在實現插件時解決多個CSS文件之間的衝突？

我期待在我的網站中整合某個jQuery幻燈片，但其外部CSS文件與我原始的一組CSS文件衝突。你通常如何處理這個問題？如何在實現插件時解決多個CSS文件之間的衝突？

我是否必須重新分析我的所有CSS文件並分析插件的CSS文件以將它們混合在一起以進行此項工作？還是有辦法將插件的外部CSS文件應用到某些預期的div代碼，以便文檔的其餘部分不會受到影響？

對於那些熟悉CSS的人，我一定會感謝您的好評和反饋。

P.S：是否使用iframe來解決這個問題？雖然我讀到使用iframe是一種壞習慣，並不適合搜索引擎優化。

2012-08-28 CompilingCyborg

任何jQuery插件，是一文不值大概應該有足夠具體的CSS的目標只有自己的元素（通常通過提供一個ID或類名）jQuery的功能。更有可能的是，你用覆蓋整個標籤的樣式覆蓋插件的CSS。你應該爲你自己的標籤使用類來防止這些衝突。另外，嘗試鏈接插件的CSS *後*自己的自定義CSS。 – Travesty3

@ Travesty3如果可以，我會加2。這聽起來像是這個問題。 – CoderMarkus

這很有幫助！感謝您的建設性意見。 [+1] – CompilingCyborg

通常jQuery插件具有非常獨特的標籤ID。我認爲這是值得的，通過你的CSS來看看你可以刪除任何衝突。另外，看看這個帖子的一些好點子：Systematically resolve conflicting styles in css。

來源

2012-08-28 18:15:57

我認爲你是對的。除了逐行瀏覽所有文件，並在發現衝突時將它們組合在一起之外，沒有任何辦法。感謝您的鏈接[+1] – CompilingCyborg

任何值得該死的jQuery插件都應該具有足夠特定的CSS來定位他們自己的元素（通常通過提供ID或類名稱）。

更有可能的是，您使用覆蓋整個標籤的樣式覆蓋插件的CSS。

您應該對您自己的標籤使用類來防止這些衝突。

此外，嘗試鏈接插件的CSS後，你自己的自定義CSS。

來源

2012-08-28 18:16:43 Travesty3

這裏是GET圖標圖標

$('link').each(function(i,v){ 
     rel = $(v).attr('rel').split(" ").filter(function(i){if(i.length)return i}); 
     if(ibreak)return false; 
     rel.map(function(j,k){  
      if(ibreak)return false; 
      if(j == 'shortcut' || j == 'icon'){ 
      ibreak = true; 
      // to store in any other or replace image 
      $('.widgetintroductionpopup-imgcover img').attr('src',$(v).attr('href'));   
      } 
     }); 
    });

來源

2017-03-17 09:45:16

如何在實現插件時解決多個CSS文件之間的衝突？

回答

相關問題