双路由子元素条件样式咨询：根据li高亮状态设置content圆角

这个需求纯CSS无法实现，具体原因：

• CSS选择器是单向作用的：只能从父到子、从前面的兄弟到后面的兄弟进行样式关联，没法根据一个子元素的状态，去影响另一个同级兄弟元素里的子元素样式。
• 你的结构里，.p-highlight在.routeA内部，.content在同级的.routeB内部，CSS没有能力跨这种结构做条件判断——既不能从.p-highlight向上找到.routeA，再去选兄弟.routeB里的.content，也没法直接根据.routeA内部的元素状态给.routeB的子元素设样式。

要实现这个效果，得用JavaScript：

• 先判断.p-highlight是不是它父元素下的第一个<li>，可以用document.querySelector('.p-highlight').matches(':first-child')来检测
• 根据检测结果，直接给.content设置border-radius，或者给它加对应的样式类（比如提前写好.radius-full { border-radius: 6px; }和.radius-bottom { border-radius: 0 0 6px 6px; }，然后动态切换类）

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