0

我正在尝试将包含带有单独 CSS 和 js 文件的 HTML 脚本的 php 文件导入另一个包含我的页眉和页脚的 php 文件。页眉和页脚来自一个模板，该模板使用了一个非常混乱和复杂的 CSS，它基本上对几乎 10 个不同位置/文件中的所有内容都有规则。当我将我的 php 导入这个主模板页面时，所有导入页面的样式也继承自基本模板，它基本上覆盖了我的东西。有没有一种方法可以强制每个 php/html 脚本保持自己的样式，而不必在将它们从一个文件导入到另一个文件时相互继承？

非常感谢

4

2 回答 2

2

你是如何导入文件的？

你的答案是使用include()还是require()答案是否定的！生成 html 代码后，所有这些都将显示在同一页面中，这就是所有css和js文件都应用于您的 html 的内容。

您可以做的是将 css 和 js 文件添加到文件中（例如：）assets.php，建立订单，然后将其导入main.php并解决 html 上的类和 id 的所有问题以避免覆盖。

编辑：关于 CSS 加载顺序

加载 CSS 文件的顺序对应用样式的影响很小。对某个元素应用什么样式取决于 CSS 规则中使用的选择器的特殊性。即使稍后声明具有较低特异性的样式，较高的特异性也会推翻较低的特异性。

于 2013-02-14T05:52:29.147 回答
2

您需要命名您的 css 和 javascript 空间，以防止它们被您的页眉和页脚污染。

有很多名称间距模式......但让我建议一些：

css：对于您导入的每个页面.. 您可以运行这样的 jQuery 脚本：

jQuery(document).ready(function() {
    jQuery('body').attr('id','importedPagei');
}

然后当您导入 css .. 您应该创建一个构建脚本，将属性附加body#importedPagei到您正在调用的每个 css

即这是在运行构建脚本之前导入页面的 css 示例：

.style1 {
color:red
}

在运行 jQuery 脚本之后：

body#importedPagei .style1 {
color:red
}

所以让我们说之前......你的标题模板有以下类：

//header.css 
h1 {
color: red;
}

在您导入的文件中

//importedFile.css
h1 {
color:blue;
}

那么旧解决方案中的最终结果将覆盖您的模板标题样式：

//old final outcome
h1 {
color:blue;
}

但是使用上面提出的解决方案，您将拥有（如前所述）：

//importedFile.css
body#importedPagei h1 {
color: red;
}

并且由于您使用 jQuery 将 id 属性附加到 importFile.html 的主体节点，因此 html 将如下所示

<body id="importedFile">
  ..
  <h1>hello world</h1>
  ..
</body>

所以在这种情况下..使用css级联规则..导入文件的css选择器比模板的强..所以最终应用的样式将是color: red

javascript： 您还可以使用构建脚本选择性地为特定页面导入特定的 javascript 文件。

另一种干净的方法是使用js.node 模块.. javascript 的问题是所有内容都在全局命名空间中.. 有一些您可以使用的名称间距模式.. 但是 node.js 提供了一个内置且非常干净的解决方案为了它。因此，您可以在最终代码中包含所有 javascript，但让 node.js 负责对其进行划分。这完全取决于你想投入多少时间来解决这个问题

于 2013-02-14T06:21:26.210 回答