css 选择器 如何选择前一节点？

Question

<p>     <a href="https://segmentfault.com" class="p1">This is a paragraph.1</a>     <a href="https://segmentfault.com" class="p2">This is a paragraph.2</a> </p>.p1:hover+.p2 {                outline: 10px double purple;             }             .p2:hover~.p1 {                outline: 10px double purple;             }其实想做就是:鼠标悬停p1,给p2一个框； 鼠标悬停p2,给p1一个框。 但，后半句无效。把组合选择器都试了，它们全是向后选择节点的，没法向前。。。？问题2：如何选择不同父的两个/多个元素？还是上例，我开始的HTML是这样写的<div>         <p>         <a href="https://segmentfault.com" class="p1">This is a paragraph.1</a>     </p>     <p>         <a href="https://segmentfault.com" class="p2">This is a paragraph.2</a>     </p></div>后来发现，组合选择都是兄弟 后代，像上面分属于两个<p>的,貌似没啥关系，怎样实现我问题1的目的？

Answer 1

p:nth-child(1) p:nth-child(2) p:first-child p:last-child