CSS+取所有兄弟元素

在CSS中，有時候我們需要取所有的兄弟元素，這樣做可以方便我們一次性地對它們進行樣式處理。以下是一個例子：

<div class="sibling">
<h2>標題1</h2>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
</div>

我們可以使用CSS的 ~ 或 + 選擇器來取所有的兄弟元素。 ~ 選擇器會選中所有在當前元素之后的兄弟元素，而 + 選擇器只會選中當前元素后面的第一個兄弟元素。

.sibling h2 ~ p {
color: red;
}

上述代碼將選擇在h2元素之后所有的段落元素，并將它們的顏色設置為紅色。因此這個例子中的三個段落都會被選中。

有時候，我們希望只選中相鄰的兄弟元素。這時可以使用 + 選擇器。以下是一個例子：

.sibling p + p {
margin-top: 10px;
}

上述代碼只會選擇第二個和第三個段落元素，并將它們的頂部邊距設置為10像素。因此，第一個段落不會受到影響。

總結

使用 ~ 和 + 選擇器可以方便地取所有的兄弟元素或相鄰的兄弟元素，并對它們進行樣式處理。選擇器的語法是 "元素1 ~ 元素2" 或 "元素1 + 元素2"，其中元素1是當前元素，而元素2是需要選擇的兄弟元素。