CSS选择器：如何通过.active类选中其相邻的下一个锚点元素？

没问题，这两个需求都可以用CSS选择器轻松实现，我来一步步给你讲清楚：

假设你有这样的DOM结构：

<div class="original-parent">
  <p>这是原父元素的子元素</p>
</div>
<div class="sibling-parent">
  <span class="target">我就是要选中的目标子元素</span>
</div>

要选中original-parent的兄弟节点sibling-parent下的target元素，你需要结合兄弟选择器和后代选择器：

• 如果目标父元素是原父元素的紧邻下一个兄弟，用相邻兄弟选择器+：

  .original-parent + .sibling-parent .target {
    /* 样式规则 */
    color: red;
  }
  

• 如果目标父元素是原父元素的任意后续兄弟（不一定紧邻），用通用兄弟选择器~：

  .original-parent ~ .sibling-parent .target {
    /* 样式规则 */
    color: blue;
  }
  

核心逻辑就是：先定位到原父元素的兄弟节点，再通过后代选择器选中它的子元素。

针对你提到的场景，比如DOM结构是这样的：

<a href="/home?page=1" class="active">1</a>
<a href="/home?page=2">2</a>
<a href="/home?page=3">3</a>

要精准选中紧跟在.active类a元素后面的那个a元素，直接用**相邻兄弟选择器+**就可以了，写法非常简单：

.active + a {
  /* 样式规则，比如给选中的页码加高亮 */
  font-weight: bold;
  color: orange;
}

这个选择器的作用就是：匹配所有紧跟在带有.active类的元素之后的同级a元素，完全符合你想要选中第二个页码a元素的需求。

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