添加第三方小部件后页面 CSS 更改答案

【问题标题】：Page CSS changed after adding third party widget添加第三方小部件后页面 CSS 更改
【发布时间】：2021-10-30 10:50:50
【问题描述】：

我在 Hubspot 中管理的网页中添加了第三方小部件，它正在更改页面上的其他 CSS。字体系列、大小和颜色都已更改，无需我编辑任何 CSS。我还没有找到可行的解决方案。我相信这个小部件正在向我的页面正文添加一个样式标签，但我没有办法删除它。如有任何建议或方向，我将不胜感激。

小部件添加了来自第 3 方的 div 和 script 标签，如下所示：

<div id="ss-custom-reviews-widget-r"></div> 
<script id="ss-custom-reviews-widget-s" src="https://12345.cloudfront.net/custom_script.js" 
ss-custom-reviews-widget-api-key="12345" widget-key="{{ tableRow[0].expID }}" 
type='text/javascript'> </script>

我无法编辑小部件的 css 或 js 文件。

【问题讨论】：

标签： css widget hubspot

【解决方案1】：

小部件是否加载自己的 CSS 文件？听起来是这样，它超越了你的风格。要修复它，您可以尽可能修改小部件 CSS 表。如果不为您的样式表添加更高的特异性。

【讨论】：

谢谢 - 我确实尝试将“！important”添加到我的主 CSS 表中，但这还不够。我已经编辑了我的问题以包含更多信息。
您是否通过 HTML 或 body 标签设置字体系列/大小等？尝试按类或 id 定义它。
在主 css 文件中，所有内容都是使用类设置的。在浏览器中，由于小部件而出现的所有“问题 css”都说它是从 body 继承的。我尝试在主 css 文件类中的项目中添加“！important”，但我可以尝试将其更改为 id 以查看是否有效。
如果您的内部样式表仍被外部样式表覆盖，则内联样式将优先于两者。当你弄清楚时，请分享你的解决方案。
我将不得不尝试更多地使用 id，但目前看来内联样式解决方案正在发挥作用。非常感谢您的所有帮助！

【解决方案2】：

这取决于如何添加小部件/库。如果它是通过 HTML 标记中的链接或脚本标签添加的，则一些基本的编译器行读取行为可以起作用，例如

<head>
    <link rel="stylesheet" href="your-widget.css">
    <link rel="stylesheet" href="your-custom.css">
</head>

但您应该提供屏幕截图和如何添加小部件的详细信息。

【讨论】：

谢谢 - 我编辑了我的问题以包含脚本的外观。它似乎在我的页面正文中添加了一个样式标签。