使用css modules： css modules是一种模块化的css编写方式，它可以自动生成唯一的类名，避免全局命名冲突。
使用Shadow DOM： Shadow DOM是一种将DOM结构和样式封装在特定区域内的技术，可以完全隔离嵌入代码的样式。但是，Shadow DOM的使用相对复杂，需要一定的JavaScript知识。
2. 使用iframe
iframe元素可以在页面中嵌入另一个HTML文档。由于iframe内部的文档与主文档是隔离的，因此iframe内部的样式不会影响到主文档。这是一种简单有效的隔离样式的方法。
<iframe src="embedded-content.html" width="100%" height="500px"></iframe>
embedded-content.html包含嵌入代码的HTML、CSS和JavaScript。
注意事项：
- 使用iframe可能会影响SEO，因为搜索引擎可能无法正确索引iframe内部的内容。
- iframe与主文档之间的通信需要使用postMessage API。
3. JavaScript控制
可以使用JavaScript动态地修改嵌入代码的样式，使其与主站点的样式保持一致。例如，可以编写JavaScript代码来检测主站点的样式，然后将嵌入代码的样式设置为与主站点相同。
// 获取主站点的h1标签的样式
var mainSiteH1Style = getComputedStyle(document.querySelector('h1'));
// 获取嵌入代码的h1标签
var embeddedH1 = document.querySelector('.embedded-content h1');
// 将嵌入代码的h1标签的样式设置为与主站点相同
embeddedH1.style.color = mainSiteH1Style.color;
embeddedH1.style.fontSize = mainSiteH1Style.fontSize;注意事项：
- 这种方法需要编写较多的JavaScript代码。
- 如果主站点的样式发生变化，需要更新JavaScript代码。
4. 审查和修改嵌入代码
在嵌入代码之前，仔细审查代码，特别是CSS样式，找出可能引起冲突的样式规则。修改嵌入代码，避免使用与主站点相同的CSS选择器，并尽量使用更具体的选择器。
总结
解决嵌入代码覆盖主站样式的问题需要综合考虑多种因素。选择哪种方法取决于具体的情况，包括嵌入代码的复杂程度、主站点的架构以及开发者的技术水平。一般来说，CSS样式隔离是首选方法，因为它简单易用，并且可以有效地避免样式冲突。如果嵌入代码非常复杂，或者需要与主站点进行复杂的交互，那么可以考虑使用iframe或JavaScript控制。在任何情况下，仔细审查和修改嵌入代码都是非常重要的。通过以上方法，可以有效地解决嵌入代码覆盖主站样式的问题，提升用户体验。
