Question

是否有任何方法可以覆盖页面上的所有其他CSS并应用不同的样式表。我有一个文件，在样式表中指定了H1，H2，P标签但是在模态窗口中我想应用单独的样式但是样式被忽略而不是站点样式。是否有停止应用的初始网站样式

Answer 1

最简单的方法是使用JS从页面的HEAD元素中删除所有样式表标记，除了您想要的表单（或者然后在该表单中添加）。

如果你使用jQuery，

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

或定位特定表格：

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

尽管如此，正如@Olly Hodgson所指出的那样，过度杀戮并破坏了你对页面所依赖的风格。

实际上，将首选样式表放在所有其他样式表（和任何内联CSS）之下，它将覆盖不使用!important标记的任何规则。或者，如果您正在编写CSS并且未强制执行特定样式，请使用!important，例如：

   div{height:99px!important;}

Answer 2

将下面的新样式写入您需要覆盖的样式。这对你有用。

Answer 3

您可以在已加载的其他任何内容之后向页面添加另一个样式表。然后确保您在其中编写的规则是a higher specicifity而不是您要覆盖的规则。

因此，如果你的主页的CSS有这样的东西：

p { color: #000000; }

你可以在你的模态中覆盖它（假设你的模态有class="modal"）：

.modal p { color: red; }

另一种选择是使用仅提供样式的页面将模态内容加载到iframe中。