CSS作為一種樣式表語言，能夠幫助我們控制網頁的樣式。而在控制樣式時，選擇元素顯得尤為重要。一般來說，CSS選擇器可以選擇出相應的元素，如class選擇器、id選擇器、元素選擇器等等。而本文將講述如何選擇前后元素的方法。

在CSS樣式表中，屬性選擇器可以選擇具有指定屬性的元素。而其中的結合選擇器可以使用多個選擇器組合。而最常用的結合選擇器則是adjacent sibling combinator和general sibling combinator。

相鄰兄弟選擇器

相鄰兄弟選擇器是指選擇指定元素緊貼在另一個指定元素后面的情況。例如以下HTML代碼：

<p>元素A</p>
<p>元素B</p>
<p>元素C</p>

想要選擇元素B，可以使用相鄰兄弟選擇器+，代碼如下：

p + p {
color: red;
}

這段代碼的意思是：選擇緊貼在

元素后面的

元素，將其字體顏色設置為紅色。因此，只有元素B的字體顏色會被設置為紅色。

通用兄弟選擇器

通用兄弟選擇器是指選擇緊跟在指定元素之后的所有元素。例如以下HTML代碼：

<p>元素A</p>
<p>元素B</p>
<a href="#">超鏈接A</a>
<p>元素C</p>
<a href="#">超鏈接B</a>

想要選擇元素B、元素C、超鏈接B三個元素，代碼如下：

p ~ * {
color: red;
}

這段代碼的意思是：選擇緊跟在

元素后面的所有元素，將它們的字體顏色設置為紅色。因此，元素B、元素C和超鏈接B的字體顏色都會被設置為紅色。

以上便是關于CSS選擇前后元素的方法介紹。相鄰兄弟選擇器和通用兄弟選擇器可以幫助我們更加細致地控制元素的樣式，為網頁布局提供更多可能性。