如何获取带有active类元素之后第4个元素的CSS选择器？

嘿，我来帮你搞定这个CSS选择器的需求！针对你给出的示例场景——7个div里，要选中带有active类的元素之后的第4个元素，我们可以用CSS的兄弟选择器组合来实现，下面给你具体方案：

先看你的示例HTML结构 #

<div>1</div>
<div class="active">2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div> <!-- 这是你需要选中的目标 -->

两种可行的选择器写法 #

方式1：通用兄弟选择器 + :nth-of-type()（推荐） #

这是最灵活的写法，哪怕后续元素数量变化也能轻松调整：

div.active ~ div:nth-of-type(4)

拆解一下逻辑：

• div.active 精准定位到带active类的那个div
• ~ 是通用兄弟选择器，会选中这个active元素之后所有同级的div
• :nth-of-type(4) 从这些后续的div里挑出第4个，正好对应示例里的第7个div

方式2：链式相邻兄弟选择器（适合固定数量场景） #

如果就是固定要选第4个后续元素，也可以用相邻兄弟选择器+连写：

div.active + div + div + div + div

简单说，每个+都代表“选中当前元素的下一个同级div”，连加4次，就会跳到active元素之后的第4个div啦。

小提醒 #

• 如果你的同级元素不只是div（比如混了p、span这类标签），一定要用:nth-of-type()而不是:nth-child()——前者只统计同类型元素，后者会把所有同级元素都算进去，容易出错。
• 要确保带active类的元素确实在目标元素的前面，而且是直接同级关系，不然选择器可就失效咯！

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