能否使用CSS选择器选取非兄弟关系的指定元素之后的元素？

结论：仅靠原生CSS选择器无法直接选取你例子中id为A的h3之后的那个h3元素

为什么不行？ #

CSS提供的兄弟选择器有两种，但都满足不了这个场景：

• 相邻兄弟选择器+：只能选中和目标元素紧挨着的同层级兄弟，你的例子里两个h3分别在不同div下，根本不是同层级，自然用不了。
• 通用兄弟选择器~：能选中目标元素之后的所有同层级兄弟元素，但同样受限于「同层级」的要求，两个h3分属不同父容器，不在同一层级，所以这个选择器也失效。

可以怎么解决？ #

如果要实现类似选中效果，有两个靠谱的方向：

• 用JavaScript：通过DOM操作找到id为A的元素所在的div，再定位到它之后的div，最后选中里面的h3。
• 调整HTML结构：把两个h3放到同一个父容器里，这样就能用#A ~ h3轻松选中后续的h3元素。

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