CSS中:hover无法修改垂直导航栏样式问题求助

核心问题：HTML结构违反规范 #

HTML里<a>标签属于交互式元素，绝对不能嵌套另一个<a>标签。浏览器检测到这种非法嵌套时，会自动修正DOM结构，把内层的<a>标签移出外层<a>的范围。

修正后的实际DOM结构会变成这样：

<nav>
  <a href="" class="primero">Google</a>
  <a href="" class="changeColor">Coche</a>
  <a href="" class="changeColor">Avion</a>
  <a href="" class="changeColor">Bici</a>
</nav>

此时.changeColor元素根本不是.primero的子元素，你写的.primero:hover .changeColor选择器自然匹配不到任何元素，样式也就不会生效。

解决办法 #

方案1：修改外层容器为非交互式元素

把外层的<a class="primero">改成<div>（如果不需要它跳转），结构如下：

<nav>
  <div class="primero">Google
    <a href="" class="changeColor">Coche</a>
    <a href="" class="changeColor">Avion</a>
    <a href="" class="changeColor">Bici</a>
  </div>
</nav>

对应的CSS保持不变即可：

a {
  display: block;
  text-decoration: none;
  color: black;
  width: 130px;
  text-align: center;
  padding: 10px;
  margin-bottom: 3px;
  background-color: red;
}

.primero:hover .changeColor {
  color: blue;
}

方案2：保留外层跳转功能，调整结构

如果需要.primero本身也能跳转，就把它和子链接分开，用兄弟选择器控制样式：

<nav>
  <a href="" class="primero">Google</a>
  <div class="sub-group">
    <a href="" class="changeColor">Coche</a>
    <a href="" class="changeColor">Avion</a>
    <a href="" class="changeColor">Bici</a>
  </div>
</nav>

调整CSS选择器为兄弟组合器：

a {
  display: block;
  text-decoration: none;
  color: black;
  width: 130px;
  text-align: center;
  padding: 10px;
  margin-bottom: 3px;
  background-color: red;
}

.primero:hover ~ .sub-group .changeColor {
  color: blue;
}

内容的提问来源于stack exchange，提问作者user19503612