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>