如何保留嵌入式小部件的样式？

Question

如何使外部PHP 小部件页面有自己的CSS.美中不足的是-当外部页面includeð它已经受到的样式表主机页面.

包含的页面实际上是一个注释'小部件'(有他自己的.css文件,大约30行,不多),高度和宽度的灵活性是必须的.

在PHP include是迄今为止最好的解决办法,但我失去了我的头发,调整其CSS文件,以适应/ 空(添加/不含/样式)任何可能的主机网页.

_示例:
如果主机页面具有img边框样式,则必须将它们从窗口小部件的style.css中取消,对于H3,P等等.

除了使用iframe之外,您如何保护小部件样式表不受主机页面样式的影响？

Answer 1

你知道 CSS 是客户端的东西；它不知道 PHP 以及页面是如何在服务器上生成的。

您必须关注最终生成的 HTML 并重新定义标签、类和 ID，以便您所需的样式规则适用于正确的元素。

您可以通过使用唯一 ID 或类将该部分包围在 div 中并在 CSS 选择器中使用它来限制 CSS 规则的范围，这样它们就不会应用于该 div 之外的元素。

或者，如果您不能这样做，则必须使用更强的规则来覆盖其他元素包含的规则。这会有点混乱，但您可以使用多种技术（例如 !important 或拥有更多选择器部分）覆盖应用于元素的样式。

例如，在以下两个示例中，第二条规则将覆盖第一条规则：

#comments .link { color: red; } /* Included page rule */
#header .link { color: blue !important; }

或者

#comments .link { color: red; } /* Included page rule */
#header div a.link { color: blue; }