Vue.js作用域的CSS無法在單個文件組件中工作

Question

我試圖設置一個文件組件。 但是指定的CSS（也包括范圍內的CSS）將被忽略並且不會呈現。

我嘗試了一個簡單的組件：

<template>
  <div>
    <h1>A Headline</h1>
    <p>A test example</p>
  </div>
</template>
<style scoped>
    h1 {
        color: red;
    }
</style>

組件呈現良好，但未應用css樣式。

我究竟做錯了什么？

Answer 1

更新 ： 此答案是最初發布的問題的解決方案。 鑒於修改后的代碼示例，它不再適用。 當我對當前問題有一個答案時，我將再次更新。

---

您正在將樣式應用於類.h1但是沒有元素具有此類。 您似乎打算將樣式應用於h1元素，因此刪除. 從樣式定義的名稱開始：

<template>
  <div>
    <h1>A Headline</h1>
    <p>A test example</p>
  </div>
</template>
<style scoped>
    h1 {
        color: red;
    }
</style>