html - 为什么悬停颜色不遵循 :hover in a div?

Question

我在这样的类(class)中有一个链接:

<div class="brand">
          <a href="/">amazona</a>
</div>

我更改了链接颜色和链接:悬停颜色，如下所示:

a {
  color: green;
  text-decoration: none;
}
a:hover {
  color: red;
}

它工作得很好。但是当我像这样更改 div 中的链接颜色时:

.brand a{
color:brown;
}

即使我将鼠标移到链接上，链接颜色也是棕色的。我希望悬停颜色为红色。为什么会发生这种情况？我该如何修复它？

Answer 1

要解决这个问题，您首先需要了解CSS的特殊性(访问: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity )。 如果您使用 .brand a CSS 变得更加具体，因此在 a:hover 上您还需要添加更具体的 CSS，例如 .brand a:hover

a {
  color: green;
  text-decoration: none;
}
a:hover {
  color: red;
}
.brand a{
  color:brown;
  text-decoration: none;
}
.brand a:hover{
  color:red;
}

<div class="brand">
          <a href="/">amazona</a>
</div>