点击处理程序后覆盖 CSS 文件答案

【问题标题】：Overwrite CSS file after click handler点击处理程序后覆盖 CSS 文件
【发布时间】：2015-04-28 21:44:55
【问题描述】：

JavaScript 库有一个点击处理程序。

当点击这样的链接时：

<a id="login_id">Login</a>

正在为带有登录信息的弹出窗口加载一个 popup.css 文件。

如何更改该弹出窗口的 CSS？我无法编辑库。问题是，只有当您单击它时，css 文件才会加载，而不是之前加载。在这种情况下，内联 css 将不起作用，因为 popup.css 将在使用点击处理程序时覆盖它。我尝试使用 css !important 但它不起作用。

是否可以覆盖 CSS？ jsfiddle 是不可能的。对不起。

【问题讨论】：

是的，它是一个第三方库。对不起，我会，但我不能发布链接。
将内联css与!important结合起来。
我尝试使用 css ！important 但它不起作用。@DontVoteMeDown 就像我说的，我真的很想发布它，但更改 css 只是付费功能。他们不回复，我必须更改 css 以使弹出窗口响应。
你可以用javascript改变那个弹出窗口的css中的类，但是这个方法在加载css之前
为什么不给我们看代码？

【解决方案1】：

假设您可以定位样式表，则可以使用 JavaScript 将其删除。下面的示例使用 jQuery 删除所有样式表：

$('link[rel=stylesheet]').remove();

要定位特定的网址：

$('link[rel=stylesheet][href~="url.com"]').remove();

弹出内容也有可能是通过 iFrame 从第三方加载的。这当然可以解释为什么甚至 !important 也不会覆盖样式。

【讨论】：

【解决方案2】：

我认为你错过了CSS 的想法。您应该使用classes 来确定哪些样式适用于哪些元素，而不是尝试为不同的元素使用不同的工作表。

CSS 中的 C 代表级联，这正是样式根据元素匹配的规则所做的事情。

更好的方法是在弹出窗口中添加/删除class 以更改样式，而不是完全添加/删除样式表。

例子：

$('#myPopUp').toggleClass('special-theme');

在此示例中，它将添加/删除类 special-theme，该类将用于如下样式表中：

#myPopUp {
  background-color: #f00;
}

#myPopUp.special-theme {
  background-color: #0f0;
}

如果您无法编辑第 3 方 CSS，则另一种选择是复制您要更改的规则。然后在加载另一个样式表时加载您的自定义样式表。这样，只要您关注CSS Rules of Precedence，它就会覆盖。

【讨论】：