为什么悬停颜色不跟随 a:hover 在 div 中？ [复制]答案

【问题标题】：Why hover color does not follow a:hover in a div? [duplicate]为什么悬停颜色不跟随 a:hover 在 div 中？ [复制]
【发布时间】：2020-04-18 09:44:06
【问题描述】：

我在这样的课程中有一个链接：

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

我改变了链接颜色和链接：悬停颜色如下：

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

完美运行。但是当我像这样更改 div 中的链接颜色时：

.brand a{
color:brown;
}

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

【问题讨论】：

标签： html css hover

【解决方案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>

【讨论】：

感谢您的回答。这是完美的。
@basir ，如果你能投票，如果它解决了你的问题，谢谢

【解决方案2】：

我将尝试回答这个问题，因为我觉得可以更好地澄清它。如上所述，需要更深入地了解 CSS 语言，特别是更深入地了解 CSS 选择器及其工作原理。
CSS按照顺序实现您在样式表中编写的代码，首先编写的内容首先计算，最后编写的内容最后计算，因此；如果你写：

.some-txt{
    color: red;
}

.some-txt{
    color: blue;
}

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

那么类 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;
        }

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

【讨论】：

【解决方案3】：

因为您指定 .brand div 中的每个链接都具有棕色。你可以这样做

.brand a:hover {
color: red;
}

这会起作用:)

【讨论】：

【解决方案4】：

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

【讨论】：

这不是因为顺序，而是与CSS的特殊性有关