html - 使用页面上的样式表覆盖 CSS 网站样式

Question

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

Answer 1

您可以在已经加载任何其他样式表之后向页面添加另一个样式表。然后确保您在其中编写的规则比您希望覆盖的规则具有更高的特异性。

因此，如果您的主页的 CSS 有这样的内容：

p { color: #000000; }

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

.modal p { color: red; }

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

Answer 2

最简单的方法是使用 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 3

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