css设置兄弟节点的样式（相邻的前一个节点）

 

 

产品需求：想在鼠标移动到“移除”的时候，“1.产品匹配测试”添加下划线和更改字体颜色

需求分析：从需求可以看出使用 :hover 就可以解决的问题，但是在实践中发现兄弟选择器（+）不好使，（+）只能是之后的，那如果想要访问当前元素（假设为a）的前一个节点（假设为b）就不能了

解决思路：对于相邻节点少的情况下可以将节点书写顺序颠倒（就是将a与b的位置换一下），然后在有排序就好啦，相关代码如下：

 

 

<style>
.history-desc{
    height: 25px;
    line-height: 25px;
    font-size: 13px;
    cursor: pointer;
    text-indent: 26px;
    color: #666;
}
.history-desc>div{
    float: right;
}
.history-remove:hover + .history-name{
    text-decoration: underline;
    color: #333;
}
</style>


<div class="history-desc">
    <div class="history-remove">移除</div>
    <div class="history-name">1.产品匹配测试</div>
</div>