html - CSS: anchor 链接悬停不起作用

Question

我想要的是，当我将鼠标悬停在 anchor 元素上时，应该应用悬停类。但它似乎不起作用。 h1 元素位于 anchor 元素内。所以我必须使用 a h1:hover 选择 h1 元素，然后只应用此类。 唯一的问题是，当我将颜色应用到 h1 时，悬停停止工作，否则效果很好。我不知道为什么会这样。任何人都可以帮忙吗？谢谢。 Code pen to play

HTML:

<a href="">
  <h1>This will not work on hover</h1>
</a>

CSS:

a, a:link{
  color: teal;
}
a:hover{
  color: salmon;
}

h1{
  color: magenta;
}
/* a h1:hover{
  color: salmon;
} */

a, a:link{
  color: teal;
}
a:hover{
  color: salmon;
}

h1{
  color: magenta;
}
/* a h1:hover{
  color: salmon;
} */

<a href="">
  <h1>This will not work on hover</h1>
</a>

Answer 1

CSS 特异性并不像您想象的那样有效。

您可以在这里阅读更多相关信息:https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/

关于您可以更改的问题:

a:hover{
    color: salmon;
}

到

a:hover h1{
    color: salmon;
}

它会起作用，因为上面的选择器更具体来自:

h1{
   color: magenta;
}

因此，当 a 悬停时它将覆盖它。

最后的 html/css 供你测试我所说的:

<a href="">
   Anchor Text
   <h1>Heading Text</h1>
</a>

和

a, a:link{
  color: teal;
}
a:hover{
  color: salmon;
}

a:hover h1{
  color: yellow;
}

h1{
  color: magenta;
}