将光标悬停在元素上后元素不会改变颜色

Question

我有以下 html 代码。

<h1 class="one">Hello</h1>

以下是应用到它的相应 CSS 样式表。

h1:hover {
    color: red;
}

h1.one {
    color: blue;
}

这会导致 h1 变成蓝色，但是在将鼠标悬停在元素上之后，它不会将颜色更改为红色。怎么了？

谢谢

Answer 1

将您的 css 重新排序为：

h1.one {
    color: blue;
}

h1:hover {
    color: red;
}

Answer 2

你应该使用：

h1.one:hover {
    color: red;
}

h1.one {
    color: blue;
}

因为更具体的选择是由 CSS 选择的。因此，当您使用 h1 时，h1.one 会被忽略，因为它更完美地指定了标签。