相邻兄弟选择器未按预期生效，请求技术排查协助

云上老周

2026-7-26

相邻兄弟选择器失效问题排查

你写的这段CSS规则（高亮激活链接的下一个链接背景色）没生效，核心原因是你的HTML结构里，每个<a>标签都被包裹在独立的<li>元素中，它们并不是真正的相邻兄弟元素。

为什么选择器不生效？

相邻兄弟选择器+的作用是：仅能选择同一个父元素下，紧挨着目标元素的下一个同级元素。而你的结构里：

<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>

每个<a>的父元素是各自的<li>，不存在任何一个<a>的直接同级元素是另一个<a>，所以nav ul li a:hover + a这种选择器根本找不到匹配的元素，规则自然不会生效。

两种修正方案

方案1：调整HTML结构（让`<a>`成为同级元素）

如果页面布局允许，把所有<a>放在同一个<li>内：

<nav>
  <ul>
    <li>
      <a href="#">Home</a>
      <a href="#">About Us</a>
      <a href="#">Products</a>
      <a href="#">Contact Us</a>
    </li>
  </ul>
</nav>

此时你原来的CSS规则就能正常生效，因为<a>们现在是同级相邻的关系。

方案2：保留现有结构，修改CSS选择器

通过选中相邻的<li>元素来间接控制下一个<a>的样式：

nav ul li a {
  color: #333; 
}

nav ul li a:hover {
  background-color: #ccc; 
}

/* 当li内的a被交互时，选中下一个li里的a */
nav ul li:hover + li a,
nav ul li:focus-within + li a,
nav ul li:active + li a {
  background-color: blue;
}

这里用li:hover + li a，先定位到被交互的<a>所在的<li>，再选中它的下一个相邻<li>内的<a>，同样能实现你要的效果。