可能的路线：

Question

我在页面上嵌入了一个小部件，该小部件链接到此javascript文件： https://widget.zola.com/js/widget.js

我已经检查了元素，并能够定位该部分并为其添加一个display: none。那行得通，但是当我将代码复制到我的CSS样式表中时，它不起作用。我什至尝试添加!important，但没有运气。

我明显缺少什么吗？

这是我添加到样式表中的代码。

.registry-header {
display: none !important;
}

我还尝试定位嵌套的类，就像这样：

.row registry-header-section .col-xs-12 .registry-header {
display: none !important;
}

其他可能有用的背景信息： -我的网站是使用Divi主题的Wordpress网站。

Answer 1

在文档树中的位置中生成当前规则，然后使用this question and answer查找如何有效覆盖这些规则。

您可能需要在元素上使用id标签并将样式应用于#id，因为这将覆盖.class级别样式。
您需要对目标尽可能具体；您的第二个示例比您的第一个示例更好。
请记住，如果窗口小部件仅使用一个JS文件，则可能是通过Javascript内联编辑CSS，因此会这样做 inline ，因此您可以需要在页面本身中添加样式调整覆盖 inline 。将您的<style>块设置为尽可能早地出现在<head>中，并将!important添加到所需元素中
使用javascript或jQuery代码块，创建自己的Javascript脚本以在其小部件脚本之后加载并强制CSS进行调整。

疯狂的主意。。。。。。
您首先需要从浏览器检查器中导出小部件生成的当前应用样式，并将其保存到您自己的（本地域）CSS文件中。

然后，您可以使用Content Security Policy专门阻止`'unsafe-inline'`部分中的`'unsafe-eval'`和`style-src:`，以阻止javascript和其他内联样式应用于页面。

用导出的CSS样式表代替它应该避免Javascript /内联样式，并允许您通过简单地编辑CSS代码来根据需要调整样式。您可以根据您的依赖关系和代码库进行微调。