在沒有css衝突的現有html中集成小部件

我必須將小部件html文件集成到現有的html頁面中，但在此之後我收到很多css問題。有沒有什麼辦法可以限制主html的CSS文件不適用於小部件html文件。在沒有css衝突的現有html中集成小部件

**Sample html :** 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml" class="csstransforms" lang="ru" > 
<head> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> 
    <meta charset="utf-8"/> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 
    <link href="abc.css" media="screen" rel="stylesheet" type="text/css"/> 
    <script src="abc.js" type="text/javascript"></script> 
</head> 
<body> 


<!-- WIDGET CODE--> 
<!DOCTYPE html> 
<html lang="en" ng-app="adidas" bb-api-url="https://adidas-dev.bookingbug.com"> 
<head> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> 
    <meta charset="utf-8"/> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 
    <link href="def.css" media="screen" rel="stylesheet" type="text/css"/> 
    <script src="defjs" type="text/javascript"></script> 
</head> 

<body> 
.......widget html code 
</body> 
</html> 



<body> 
</html>

來源

2016-09-16 yusuf

如果有普通的類，那麼它會影響，通過改變小部件的css文件中的類名嘗試 – brk

對於HTML，您不允許在一個文件中包含兩個HTML文檔。要解決這個

一種方法是通過在主HTML使用iframe：

<iframe src="widget.html"></iframe>

所以你創建自己的HTML文件，你的部件都有自己的風格和JavaScript腳本，並在主把它嵌入使用iframe的HTML文件（然後您的小部件與您的主要HTML腳本和樣式完全隔離，且不受其影響）。

另一種方法是爲您創建一個單獨的CSS小部件，並將其包含在您的主HTML中，然後在您的主HTML主體中僅插入小部件的標記（不包含html和body標籤）。

在你的widget CSS文件，你應該創建一個「命名」爲您控件的風格，不會做這樣的事情與你的CSS其餘碰撞：

.my-widget-name { 
    // your widget styles 
} 
.my-widget-name span.name { 
    // your widget style 
} 
.my-widget-name .box { 
    // your widget style 
} 
....... 
.......

（我通常喜歡使用的東西像少了，但上面顯示的是一個傳統的CSS例子）

「我的小部件名稱」應該是唯一的窗口小部件是採用了獨特的類名，並通過子類所有的部件樣式根據本類名，你基本上將它與CSS的其餘部分隔離開來。

希望它有點幫助

來源

2016-09-16 05:45:26 codelock

在沒有css衝突的現有html中集成小部件

回答

相關問題