为什么悬停颜色在 div 中不跟随 a:hover？

Question

我在 class 中有一个 link 像这样：

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

然后我像这样更改了 link 颜色和 link:hover 颜色：

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

效果很好。但是当我像这样更改 div 中的 link 颜色时：

.brand a{
color:brown;
}

即使我将鼠标移到它上面，link 颜色也是棕色的。我希望悬停颜色为红色。为什么会这样？我该如何解决？

Answer 1

.brand a 样式覆盖了 a:hover 样式。如果您交换样式中两种样式的顺序-sheet 它将起作用。

Answer 2

因为您在 .brand div 中指定了每个 link 颜色为棕色。你可以做到

.brand a:hover {
color: red;
}

这会起作用:)

Answer 3

解决这个问题首先需要了解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>

Answer 4

我打算尝试回答这个问题，因为我觉得它可以得到更好的澄清。如上所述，需要更深入地了解 CSS 语言，特别是更深入地了解 CSS 选择器及其工作方式。
CSS按照你写的风格-sheet按照顺序实现你写的代码，先写的先计算，后写的最后计算，因此；如果你写：

.some-txt{
    color: red;
}

.some-txt{
    color: blue;
}

.some-txt{
    color: razzle-dazzle-purple;
}

然后带有 class some-txt 的文本将成为颜色 'razzle-dazzle-puple'。这是因为 razzle-dazzle-puple 是给定分配顺序中的最后一种颜色。在您的代码中，您将棕色变为红色，取消了之前的分配。要解决此问题，您可以像这样更具体地选择您的选择器：

.brand a:hover {
     color: red;
}

或者只是简单地尝试移动东西，我测试了你的代码，我想你正在寻找的是这个：

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

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


        .brand a {
            color: brown;
        } 

        a:hover {
            color: red;
        }

请记住，当您将悬停添加到属性时，您是在将其添加到属性，因此当您更改属性时，在您已经为其分配了一个值之后，您正在改变整个属性。我希望这是有道理的，有些事情很难解释，显然理解某事的最好方法就是玩弄它。

为什么悬停颜色在 div 中不跟随 a:hover？

Why hover color does not follow a:hover in a div?

html

css

hover