Html 为什么悬停颜色不跟随：在div中悬停？

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

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

a{
颜色：绿色；
文字装饰：无；
}
a:悬停{
颜色：红色；
}

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

。品牌a{
颜色：棕色；
}

---

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

。品牌a样式将覆盖a:悬停样式。如果在样式表中交换这两种样式的顺序，它将起作用。

因为您指定了.brand div中的每个链接都是棕色的。 你能行

.brand a:hover {
color: red;
}

---

这将起作用：）

要解决此问题，首先需要了解CSS的特殊性（请访问：）。 如果您正在使用

。品牌a

CSS变得更加具体，因此在

a:hover

上，您还需要添加更具体的CSS，如

。品牌a:hover

a{
颜色：绿色；
文字装饰：无；
}
a:悬停{
颜色：红色；
}
.a品牌{
颜色：棕色；
文字装饰：无；
}
.品牌a：悬停{
颜色：红色；
}

---

我将尝试回答这个问题，因为我觉得它可以更好地澄清。如上所述，需要对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;
        }

---

请记住，将鼠标悬停添加到属性时，就是在将其添加到属性中，因此，当您更改该属性时，在已为其指定值后，就是在更改整个属性。我希望这是有道理的，有些事情很难解释，很明显，理解某些事情的最好方法是通过玩它。

这不是因为顺序，而是与CSS的特定性有关，请回答。这是一个完美的选择。@basir，如果你能投票，如果它能解决你的问题，谢谢你