Javascript 背景色在HTML DOM中工作，但不在<；风格>；

我想在

中设置

h2

的背景色，这样它也可以有一个

h2:hover

。这是我的密码：

<template>
  <div> 
    <h1>Services</h1>
    <div v-for="service in services">
      <h2>Service: {{ service.id }}</h2>
    </div>
  </div>
</template>

<style>
h2 {
  background: darkseagreen;
  color: white;
}
h2:hover {
  cursor: pointer;
  background: mediumseagreen;
}
</style>

它突然就好了

不过，我不想在DOM中设置样式，因为我还想保留

h2:hover

功能

---

怎么了？为什么我不能在

中设置背景色

我没有意识到

标签覆盖了背景色。添加背景：暗绿色！重要的有效，虽然我可能不建议这样做，但对我来说没问题

这是什么样的结构？为什么使用模板标签？最终的HTML/CSS是什么？可能是另一个CSS覆盖了您的样式。通过使用使其具有更高的优先级！在背景属性的末尾很重要。

<h2 style='background:darkseagreen' >Service: {{ service.id }}</h2>