html 未鏈接到 Visual Studio Code 中的 css 文件

Question

環境

視窗 8.1 64 位
可視化工作室代碼 1.15.1

問題

html 沒有鏈接到 css

css 中的類和 id 不會顯示在 html 中的 Intellisense 上。
當我將光標放在 html 中的類或 id 上並按 F12 跳轉到 css 時，會彈出一個窗口並顯示“未找到定義”。

但是，當我在瀏覽器中打開 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;
}

檔案

索引.html
css
|
+---style.css

網頁

我想知道如何擺脫這個問題。

編輯 17/9/3 19:03

謝謝你們的回答，伙計們。 以下沒有奏效。

href="../css/style.css"
href="~/css/style.css"
href="css/style.css"
在標簽中嵌入樣式表（我想將 css 保存在一個單獨的文件中）

Answer 1

我不相信跳轉到 css 類和 ids 是由 Vscode 本身支持的。 試試CSS Peek擴展，它可以很好地完成你想要的。

Answer 2

確保您提供的用於訪問 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>

這是一個替代解決方案。

根據我的說法，您的瀏覽器沒有刷新文件，因此您可以通過在 windows 中按 CTRL + F5 來刷新/重新加載整個頁面 for mac CMD + R

如果仍然遇到問題，請嘗試一下，然后您可以使用 firefox 的 firebug 工具對其進行測試。

對於 IE8 和谷歌瀏覽器，您可以按 F12 進行檢查，您的開發人員工具將彈出，您可以看到 Html 和 css。

你也可以試試這個語法：

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

確保瀏覽器實際發出請求並且不返回 404。

希望有幫助！！

Answer 3

如果 html 和 css 在同一目錄中，它應該可以工作。 怎么可能沒有呢？ 好吧，如果預覽在顯示之前將 html 復制到臨時目錄，則 css 將不存在。 這是我能想象這個問題存在的唯一方法。

html 未鏈接到 Visual Studio Code 中的 css 文件

問題描述

環境

相關問題

問題

html 沒有鏈接到 css

編輯 17/9/3 19:03

3 個解決方案

解決方案1
2 2017-09-04 21:54:27

解決方案2
0 2017-09-03 05:51:36

解決方案3
-1 2021-06-09 18:32:30

html 未鏈接到 Visual Studio Code 中的 css 文件

問題描述

環境

相關問題

問題

html 沒有鏈接到 css

編輯 17/9/3 19:03

3 個解決方案

解決方案1 2 2017-09-04 21:54:27

解決方案2 0 2017-09-03 05:51:36

解決方案3 -1 2021-06-09 18:32:30

解決方案1
2 2017-09-04 21:54:27

解決方案2
0 2017-09-03 05:51:36

解決方案3
-1 2021-06-09 18:32:30