我正在使用 jquery 加载一个新的 html 文件，但 css 不起作用答案

【问题标题】：I am using jquery load a new html file, but css doesn't work我正在使用 jquery 加载一个新的 html 文件，但 css 不起作用
【发布时间】：2015-07-08 05:06:12
【问题描述】：

<html>
  <head>
  <link rel="stylesheet" type="text/css" href="./css/public.css">
  </head>
  <body>
     <div id="ajaxcont">
        <!-- i will load some.html here by ajax -->
     </div>
     <script>
        $("#ajaxcont").load("some.html");
     </script>
  </body>
</html>

some.html 看起来像这样：

<link rel="stylesheet" type="text/css" href="./css/another.css">
<div>some contents here</div>

但我发现another.css有时不起作用，控制台告诉我：

“主线程上的同步 XMLHttpRequest 已被弃用，因为它对最终用户的体验产生不利影响。如需更多帮助，请查看http://xhr.spec.whatwg.org/。”

而且我想为不同的html页面加载不同的css文件，所以我不想把那些css文件提前放入<head><head>；

【问题讨论】：

标签： jquery html css ajax

【解决方案1】：

您需要加载 jquery 库才能使 jquery 工作。

<html>
  <head>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <link rel="stylesheet" type="text/css" href="../css/public.css">
  </head>
  <body>
     <div id="ajaxcont">
        <!-- i will load some.html here by ajax -->
     </div>
     <script>
        $("#ajaxcont").load("some.html");
     </script>
  </body>
</html>

此外，使用相对路径向上移动目录的正确方法是两个句点，而不是一个句点：

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

【讨论】：

【解决方案2】：

终于找到了解决办法：使用

<style>
  @import url('./css/another.css');
</style>

而不是

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

【讨论】：

【解决方案3】：

右键单击 html 文档并查看其页面源代码，单击样式表的 url 并检查其是否存在。您的 css 文件的 url 可能是错误的。

【讨论】：

【解决方案4】：

检查 CSS 文件是否具有指定路径的执行权限。如果您使用的是 linux 操作系统。

【讨论】：