html没有链接到Visual Studio代码中的css文件

环境

  • Windows 8.1 64位
  • Visual Studio代码1.15.1

相关的问题

  • HTML不会链接到Visual Studio代码中的CSS文件

问题

HTML不链接到CSS

  1. CSS中的类和标识不会显示在HTML中的Intellisense上。
  2. 当我把光标放在html中的一个类或者id上,然后按F12跳到css时,popup一个窗口并显示“找不到定义”。

但是,当我在浏览器中打开HTML,网页显示完全正常。 所以,我的Visual Studio代码似乎有什么问题。

HTML

<!DOCTYPE html> <html lang="en"> <head> <title>Test</title> <link rel="stylesheet" type="text/css" href="./css/style.css"> </head> <body> <div class="abc"></div> <div id="xyz"></div> </body> </html> 

CSS

 .abc{ width: 100px; height: 100px; background: red; } #xyz{ width: 100px; height: 100px; background: blue; } 

的index.html
CSS
|
+ —的style.css

网页

在这里输入图像说明

我想知道如何摆脱这个问题。

编辑17/9/3 19:03

谢谢你的答案,伙计们。 以下没有工作。

  • href="../css/style.css"
  • href="~/css/style.css"
  • href="css/style.css"
  • 在标签中embedded样式表(并且我想把css保存在一个单独的文件中)

我不相信跳转到Css类和ID由Vscode本地支持。 尝试CSS Peek扩展,它做你想做的很好。

确保您提供的访问style.css文件的路径是正确的。 如果这不起作用,请尝试在index.html中添加内联css:

 <!DOCTYPE html> <html lang="en"> <head> <title>Test</title> <style type="text/css" media="screen"> .abc{ width: 100px; height: 100px; background: red; } #xyz{ width: 100px; height: 100px; background: blue; } </style> </head> <body> <div class="abc"></div> <div id="xyz"></div> </body> </html> 

这是一个替代解决方案。

根据我的浏览器不刷新文件,所以你可以刷新/重新加载整个页面按CTRL + F5在windows中的CMD + R

如果仍然出现问题,请尝试一下,然后使用firefox的firebug工具来测试它。

对于IE8和谷歌浏览器,你可以通过按F12来检查你的开发者工具将弹出,你可以看到Html和CSS。

你也可以试试这个语法:

 <link href="./css/style.css" rel="stylesheet" type="text/css" media="screen, projection"/> 

确保浏览器实际发出请求并且不返回404。

希望能帮助到你!!

尝试替换'。' 与'〜'。 这应该工作。