列表样式图像不适用于外部样式 sheet

Question

我写在下面Html代码：

<!DOCTYPE html>
<html>
<head>
<style>
ul{
list-style-image:url('img/grey.png');
}
</style>

<body>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

</body>
</html>

列表成功创建，但是当我想使用外部样式 sheet 并更改代码时我遇到了问题。

代码：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/styletest.css?version=2" ></head>

<body>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

</body>
</html>

样式sheet:

ul{
list-style-image:url('img/grey.png');
}

图像未以第二种样式显示。

感谢您的帮助。

Answer 1

当您更改为外部样式表时，您也更改了 "working directory"，因此您的图像 url 应该是“../img/grey.png”而不是 "img/grey.png"。通过添加“..”，您将向上移动一个目录。

您也可以使用“/img/grey.png”使其成为根相对引用。

然而，问题的原因是添加的 "css/" 路径。如果您将 css 文件放在与 html 文件相同的目录中，您就不会有任何问题。

Answer 2

您需要更新样式表中图像的路径。样式表中的路径是相对于样式表的。

您正在使用从定义目录开始的相对路径。

您的第一个工作示例建议使用以下项目结构。

img/
 └── grey.png
index.html

img/grey.png 在 index.html 中定义，因此相对路径开始寻找 index.html 所在的名为 img 的目录。它找到它是因为 index.html和img目录在同一个目录下。然后继续沿着文件路径前进。

你的第二个非工作示例建议使用以下项目结构。

css/
 ├── styletest.css
 └── img/
      └── grey.png
index.html

img/grey.png定义在styletest.css中，所以相对路径开始寻找styletest.css所在的名为img的目录，它在css 目录。它找不到 img，因为它不在 css 目录中。它比 css 目录高一级，如下所示。

css/
 └── styletest.css
img/
 └── grey.png
index.html

要从当前目录向上移动目录级别，您需要使用 ../。现在系统将向上移出css目录，并继续从那个目录沿着指定的路径搜索文件。

变化自

list-style-image: url( 'img/grey.png' );

到

list-style-image: url( '../img/grey.png' );

Answer 3

像dippas说的，图片路径是错误的。原因是相对路径从定义规则的 css 文件的位置开始。在您的第一个示例中，您使用的是内联 css，因此路径是相对于文档根目录的。在您的第二个示例中，您使用的是子文件夹 /css 中的外部 css 文件，所以这是现在的路径，相对路径 'img/grey.png' 不再起作用。 ../img/grey.png 将不起作用。

列表样式图像不适用于外部样式 sheet

list style image not working by external style sheet

html

css

list

stylesheet