我正在制作一个A / B网站。主要是为了好玩。它分为两个部分。它从互联网上获取一个页面并将其显示在一个容器中(div#page)。因此,我获取了example.com,并更改了基准并将其显示在div中。到目前为止,一切都很好。

上端部分是我网站的内容(div#header)。我显示了菜单,一个表单(用于指定url)和其他一些内容。

问题是:example.com的css也适用于我网站的元素。如何阻止这种情况的发生?我希望example.com的CSS仅适用于#page,而不适用于#header

有办法吗?我知道我可以使用重置助手,但似乎不是最佳解决方案:必须重新定义所有内容。另外,我的网站的CSS将应用于example.com

有什么想法,或者这是不可挽回的?

最佳答案

您可以尝试隔离所有样式,而不必在.css中所有选择器的前面放置更具体的选择器。

因此,如果有一堆样式选择器:

.main{ ... }
#myContainer { ... }
#menu .menu-item { ... }
p { ... }


(或者可能是什么)

然后在HTML的最顶层元素(例如BODY元素)上放置一个id,例如“ myPage”,然后将所有css选择器更改为此:

#myPage .main{ ... }
#myPage #myContainer { ... }
#myPage #menu .menu-item { ... }
#myPage p { ... }

10-07 16:15
查看更多