CSS中找到兄弟元素是很常見的任務(wù)。通過CSS，我們可以選擇在相同父元素下的所有兄弟元素，或者通過不同的選擇器來篩選出特定的兄弟元素。接下來通過代碼示例來學(xué)習(xí)如何找到兄弟元素。

<div>
<p>第一個p元素</p>
<p>第二個p元素</p>
<span>一個span元素</span>
<ul>
<li>列表1</li>
<li>列表2</li>
</ul>
</div>
<style>
/* 選擇相同父元素下的所有兄弟元素 */
/* 選中所有p和span元素 */
div p, div span {
color: red;
}
/* 選擇特定的兄弟元素 */
/* 選中第二個p元素 */
div p:nth-of-type(2) {
color: blue;
}
</style>

在這個例子中，我們有一個父元素div，它包括三個不同類型的子元素。我們想要選擇這些元素中某些或全部的兄弟元素。你可以看到在CSS中，我們使用逗號分隔多個選擇器，可以選擇相同父元素下的所有兄弟元素。在這個例子中，我們通過選擇div中的所有p和span元素，并將它們的字體顏色設(shè)置為紅色。

但是，我們也可以通過不同的選擇器來篩選出特定的兄弟元素。在這個例子中，我們想要選中第二個p元素，所以我們使用:nth-of-type(n)選擇器，將n替換為第二個p元素的索引。我們將第二個p元素的字體顏色設(shè)置為藍(lán)色。你可以看到，通過這些CSS規(guī)則，我們可以方便地找到兄弟元素。