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

Question

这个问题在这里已经有了答案:





How are the points in CSS specificity calculated

(7 个回答)



Understanding CSS selector priority / specificity

(4 个回答)


1年前关闭。




我在这样的类(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 语言有更深入的了解，特别是对 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;
        }

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