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

如何制作外部PHPwidget页面有自己的CSS。 问题是 - 当外部页面是included 它受到样式表的影响host page.

包含的页面实际上是一个注释“小部件”（带有自己的.css 文件，大约 30 行，不多），并且高度和宽度的灵活性是必须具备的。

The PHP include是迄今为止最好的解决方案，但我调整 CSS 文件以适应 /null（添加/排除/样式）任何可能的主机网页。

_Example:
if the host page has styles for img borders I have to null them from the widget's style.css, same for H3, P, and so on.

如何保护小部件样式表免受host页面样式，除了使用iframe?

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

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

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

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

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

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

or

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