CSS獲取上一個兄弟節點

在進行頁面的樣式設計時，有時我們需要對元素的前面一個兄弟節點進行樣式修改或者渲染，那么我們如何獲取上一個兄弟節點呢？CSS提供了一個選擇器——“~”選擇器，它可以選中指定元素之后的所有兄弟元素，可以作為獲取上一個兄弟節點的解決方案。
下面是一個示例代碼：
<div>
<ul>
<li>第一項</li>
<li>第二項</li>
<li>第三項</li>
<li class="modify">第四項</li>
</ul>
<div class="box">這是上一個兄弟節點</div>
</div>
我們需要對“box”這個元素進行樣式修改，可以使用如下代碼：
.modify ~ .box {
color: red;
}
其中，符號“~”表示選中類名為“modify”的元素之后的所有兄弟元素，“.box”表示類名為“box”的元素，兩者用空格分隔。
通過這樣的CSS代碼，我們就可以成功的獲取上一個兄弟節點，并將其樣式進行修改。需要注意的是，“~”選擇器只能選擇后面的兄弟節點，如果需要選中前面的兄弟節點，則需要借助JavaScript來實現。