为什么元素的内联样式取消了相同的 `:hover`？

Question

我知道如果我为 color 设置内联样式，它会取消样式标签或 CSS 文件中关于颜色的样式（以推断优先顺序）。但为什么它取消为同一元素设置 :hover 的颜色？虽然它适用于 hover 情况而不是正常颜色。

a {
  background-color: #333;
  color: white;
  text-decoration: none;
  padding: 5px;
}

a:hover {
  color: yellow;
}

<a href="/" style="color: tomato">Home</a>

如何解决？只有这个答案？（在锚标签中设置:hover？）

Inline style to act as :hover in CSS

感谢指导:)

Answer 1

But why does it cancel setting a color for :hover for the same element?

样式属性比选择器的任意组合更具体。

And how to fix that?

避免样式属性。使用 class 并编写一个以它为目标的规则集。

a {
  background-color: #333;
  color: white;
  text-decoration: none;
  padding: 5px;
}

a.foo {
  color: tomato
}

a:hover {
  color: yellow;
}

<a href="/" class="foo">Home</a>

Answer 2

你是对的，但是如果需要在悬停文本时改变颜色，你必须这样做（刚刚添加了重要标签）：

a {
  background-color: #333;
  color: white;
  text-decoration: none;
  padding: 5px;
}

a:hover {
  color: yellow !important;
}

<a href="/" style="color: tomato">Home</a>

Why an inline style for an element cancels a `:hover` for the same?