如何使外部PHP 小部件页面拥有自己的CSS。
问题是 - 当外部页面为include时，它受到主机页面样式表的影响。
包含的页面实际上是一个评论'小部件'（带有他自己的.css文件，大约30行，不多），高度和宽度的灵活性是必须的。
PHP include到目前为止是最好的解决方案，但是我的头发调整了CSS文件以适合/ null （添加/排除/样式） ）任何可能的主机网页。
<子>实施例
如果主机页面具有img边框的样式，我必须将它们从窗口小部件的style.css中取消，对H3，P等同等。
除了使用 iframe 之外，您如何保护小部件样式表不受主机页面样式的影响？
答案 0 :(得分：4)
你知道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; }
答案 1 :(得分：0)
尝试在带有ID的div中包含您的窗口小部件代码。然后为窗口小部件中使用的每个CSS选择器加上该选择器的前缀。
离。
<div id="widget"><p class="nav">hello</p></div>
代替，
.nav{
// styles
}
DO
#widget.nav{
// styles
}
答案 2 :(得分：0)
您可能希望在附带的代码上应用mini CSS重置。将代码置于唯一ID中，如下所示：
<div id="widget">
<!--your code here-->
</div>
现在将重置应用于其中的所有内容，使用像Eric Meyer这样的基本CSS重置，可在此处获取：http://meyerweb.com/eric/tools/css/reset/
现在，应用您自己的CSS。几乎所有外部CSS都将被清除，你的将被应用。
答案 3 :(得分：0)
CSS样式的优先级如下：
根据您需要应用多少CSS，您可以将其写在“head”标签上 希望这个建议有所帮助。
答案 4 :(得分：-1)
如果我理解正确，您所包含的页面会有一些CSS规则，例如：
div {/*rules*/};
p {/*rules*/};
等等。
您应该将CSS选择器从最常用的（div选择所有页面中的div）更改为最特定的（在此顺序中使用它们：id, class, child-selector）in命令您的规则仅适用于您所包含的元素。
例如，假设您包含的页面包含在div中，PHP代码将为：
<div id="my_page">
<?php include "myPage.php"; ?>
</div>
然后，您对该页面的所有规则应仅引用ID为my_page的元素的子项：
而不是
div {/*rules*/};
你会有
#my_page div {/*rules*/};