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

Question

如何使外部 PHP 小部件 页面拥有自己的 CSS。问题是 - 当外部页面被 included 时，它会受到 host 页面样式表的影响。

包含的页面实际上是一个评论“小部件”(带有他自己的 .css 文件，大约 30 行，不多)并且高度和宽度的灵 active 是必须具备的。

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

_示例:
如果主机页面具有 img 边框的样式，我必须从小部件的 style.css 中将它们设为 null，对于 H3、P 等也是如此上。

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

Answer 1

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

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

您可以限制 CSS 规则的范围，方法是用唯一 ID 或类将该部分包围在一个 div 中，并在您的 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; }