如何实现鼠标悬停p元素时修改a元素的字体大小与颜色？

问题根源 #

你的CSS选择器p:hover div nav a逻辑完全错误——DOM结构里<p>和<a>是同级元素（同属<nav>的子元素），但这个选择器是在找<p>内部嵌套的div>nav>a，和实际结构不匹配，自然不会生效。

修正代码 #

使用通用兄弟选择器~，它能选中目标元素之后的所有同级元素，完美匹配你的需求：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      p:hover ~ a {
        color: blue;
        font-size: 22px;
      }
    </style>
  </head>
  <body>
    <div>
      <nav>
        <p>Ceramics</p>
        <a href="">One</a>
        <a href="">Two</a>
        <a href="">Three</a>
      </nav>
    </div>
  </body>
</html>

如果只需要修改<p>紧挨着的第一个<a>，改用相邻兄弟选择器+即可：

p:hover + a {
  color: blue;
  font-size: 22px;
}

基础选择器快速理解 #

• 后代选择器（空格）：如nav a，选中<nav>内所有层级的<a>
• 相邻兄弟选择器（+）：仅选中目标元素后紧接的第一个同级元素
• 通用兄弟选择器（~）：选中目标元素后所有的同级元素

内容的提问来源于stack exchange，提问作者Ben SreR sf