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

Question

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

包含的页面实际上是一个 cmets 'widget'（带有他自己的 .css 文件，大约 30 行，不多），高度和宽度的灵活性是必须具备的。

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

_示例：
如果主机页面有 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; }

Answer 2

尝试在带有 id 的 div 中包围您的小部件代码。然后为小部件中使用的每个 CSS 选择器添加该选择器的前缀。

例如

<div id="widget"><p class="nav">hello</p></div>

而不是，

.nav{
// styles
}

做

#widget.nav{
// styles
}

Answer 3

您可能希望对包含的代码应用迷你 CSS 重置。用唯一的 id 将您的代码括起来，如下所示：

<div id="widget">
    <!--your code here-->
</div>

现在将重置应用于其中的所有内容，使用像 Eric Meyer 一样的基本 CSS 重置，可在此处获得：http://meyerweb.com/eric/tools/css/reset/

现在，应用您自己的 CSS。几乎所有外部 CSS 都将被清除，而您的将被应用。

Answer 4

CSS 样式的优先级如下：

1. 浏览器默认
2. 外部样式表
3. 内部样式表（在头部）
4. 内联样式（在 HTML 元素内）

根据您需要应用多少 CSS，您可以将其写在“head”标签上。
希望建议对您有所帮助。

Answer 5

如果我理解正确，您包含的页面有一些 CSS 规则，例如：

div {/*rules*/};
p {/*rules*/};

等等。

您应该将 CSS 选择器从最通用的选择器（div 选择 所有页面中的 div）更改为最特殊的选择器（按此顺序使用它们：id, class, child-selector），以便您的规则仅适用于您包含的元素。

例如，假设您包含的页面包含在一个 div 中，PHP 代码将是：

<div id="my_page">
    <?php include "myPage.php"; ?>
</div>

那么，您对页面的所有规则都应该只引用 id 为 my_page 的元素的子元素：

代替

div {/*rules*/};

你会有

#my_page div {/*rules*/};