文件夹路径指向文件夹外部

Question

我有一个文件夹专门存放我的CSS样式，它位于主文件夹下，名为“main”。在“main”文件夹中，我还有一个名为“math”的文件夹。我想在“math”文件夹中使用我的CSS样式，但是当我输入以下代码时：

      <link rel="stylesheet" href="css/basic.css" type="text/css" media="screen" />

在“math”文件夹的index.html中，它无法正常工作。我认为这是因为它正在寻找math文件夹内的css文件夹。如何链接到不在math文件夹中的css文件夹？

- kirby

Answer 1

如果我理解正确，你的目录结构如下：

siteroot
    main
       math
       css

您想要从 /main/math/index.html 链接到 /main/css 中的样式表。

有两种解决方案，最简单的方法是使用绝对路径：

  <link rel="stylesheet" href="/main/css/basic.css" type="text/css" media="screen" />

使用绝对路径是更好的解决方案，可以减少未来的麻烦。我不知道任何缺点。

或者，您可以使用 ".." 来遍历到上级目录。

 <link rel="stylesheet" href="../css/basic.css" type="text/css" media="screen" />

- Cory Dolphin

---

"绝对路径是更好的解决方案，将会在未来减少许多麻烦。" 为什么呢？ - beltsonata

Answer 2

例如，您的目录结构如下所示：

Desktop >
        ProjectFolder >
                      index.html
                      css        >
                                 style.css
                      images     >
                                 img.png

您正在编辑 style.css 文件，并想将 img.png 用作背景图片，请使用以下代码：

url("../images/img.png")

对我来说没问题！

- KarenAnne

Answer 3

使用绝对路径：

href="/main/css/..."

- Pleun

Answer 4

答案还取决于网站是在本地开发和测试，还是将内容发布到Web服务器并在Live Site上测试链接。

如果您的href属性的URL使用相对URL，并且将域名映射到Live Site上的文档根目录，则上述答案是正确的。

但是，如果您正在测试所有文件都在本地PC的文件系统中且没有使用本地Web服务器，则您可能也会发现以下信息有用。

如果您正在进行本地测试，则通常不会与您的文档根目录关联任何域，并且路径会以多种方式更改。

如果您链接到任何子目录中的文件，则您的href或在这种情况下为src属性中将没有初始斜杠("/")，因为没有域，而相对URL相对于当前页面。（同样的规则也适用于您的href URL）

本地测试URLS：

<img src="images/image-1.jpg" alt="my-Image-1">

与在具有域名的实时网站页面上使用初始正斜杠相对应，您可以在页面上使用相对URL，而不是相对于域名。

远程实时测试：

<img src="/images/image-1.jpg" alt="my-Image-1">

我知道这不是你询问的情况，但它应该有助于以下两个例子，其中文件夹相邻且父目录在本地文件系统上。你的情况是你的相对URL指向一个位于相邻目录中的文件。如果你正在本地开发和测试，请参见下面。

2. 对于链接到相邻目录中的CSS样式表文件或者链接到当前页面上一级父目录中的文件的相对URL（通常没有域名），你的href属性URL路径应该使用双点斜杠(../)。所以你的情况（如果在没有域名的情况下进行本地测试）是：

<link rel="stylesheet" href="../css/basic.css" type="text/css" media="screen" />

...如@Cory Dolphin所示。

我遇到了这个问题，发现我的问题在于我在不同的测试环境中得到了不同的结果，这让我很烦恼。

我最初认为路径差异是因为我的本地文件在本地Windows系统上，而稍微有些不同的原因是由于远程Linux Apache VPS的文件系统。

我发现这更多地与是否将域映射到您的站点文件有关。这在W3Schools.com的页面中的src属性和相对URL部分中得到了一定的解决。

- Adam R.

Answer 5

你必须使用 ../ 返回到与 css 和 math 同级的目录，这样看起来就像是 ../css/basic.css

- Fabián Heredia Montiel

Answer 6

如果你想在那个文件夹里面定位一个文件，请使用这个。

<link rel="stylesheet" href="./css/basic.css" type="text/css" media="screen" />

如果你想定位一个文件夹之外的文件，你可以使用这段代码

<link rel="stylesheet" href="../css/basic.css" type="text/css" media="screen" />

- AR Ayush