Question

我还是个新手，我有一个问题我的网站使用了一些自定义编辑mybootstrap.css 我想按<?php include 'page.html';?>

添加页面

对于此page.html，我想使用普通bootstrap.css

现在的问题是当我使用外部css bootstrap.css到我的page.html时，它会混淆整个页面。我希望bootstrap.css只针对我的page.html，而不是整个网站。

我试图在Google和StackOverflow上进行大量搜索，有两种方法可以实现：

首先，创建一个frameset，另一个是

`<div>
    <style scoped>
        @import "scoped.css";
    </style>
    enter code here
</div>`

两者都没有有效运作。还有其他方法吗？喜欢使用一些jquery / javascript吗？

提前致谢。

Answer 1

您需要在html页面中添加它

<link rel="stylesheet" type="text/css" href="scoped.css">

或者像这样

 <!doctype html>
    <html lang="en">
      <link rel="stylesheet" type="text/css" href="scoped.css">
    </head>
    <body>

    </body>
    </html>

Answer 2

如果我理解这个问题，页面的页眉/页脚将由您提到的CSS设置样式。在这种情况下，您可以修改页面以包含页眉/页脚和iframe。 iframe将指向正在使用空页眉/页脚的页面，并且仅显示内容。内容将是page.html。这样您就可以使用新样式显示page.html，而不必担心页面其他内容的设计会被破坏。

Answer 3

您可以直接链接您的CSS，如：

<link rel="stylesheet" type="text/css" href="scoped.css">

Answer 4

检查您的网站上没有使用某些引导类，例如容器，容器流体，行e.t.c
只将bootstrap.css添加到page.html而不是你的主索引文件。注意如果你的索引文件中包含page.html可能是通过php include，那么你的网站将从bootstrap继承一些css类< / LI>
就像@hamza建议的那样，你可以从boostrap复制你neex的css样式并将其添加到mycss.css或者更好地google你需要的page.html样式并将其添加到你的css中

Answer 5

你可以尝试这个 jQuery Scoped CSS插件

包含此插件文件（最小化，理想情况下）并在加载时调用$ .scoped（）。如果稍后向页面添加样式块，则需要重新运行该插件。

任何具有scoped属性的样式块都会被处理并限制为仅影响其父级子项：

<section>
 <style scoped>
   p {color:red;}
 </style> 
 <p>This will be red.</p>
</section>

仅针对特定div的外部css

5 个答案:

您需要在html页面中添加它

你可以尝试这个 jQuery Scoped CSS插件

仅针对特定div的外部css

5 个答案:

您需要在html页面中添加它

你可以尝试这个** jQuery Scoped CSS插件**

你可以尝试这个 jQuery Scoped CSS插件