在 CSS 中，選擇同級元素是很常見的需求，而實現方法也是很簡單的。

首先，我們需要了解兩種選擇器：

.selector1 ~ .selector2 {
/* styles */
}
.selector1 + .selector2 {
/* styles */
}

其中，~ 選擇器可以匹配在 .selector1 同級別下的所有具有 .selector2 類名的元素，而 + 選擇器只能匹配同級別下的下一個具有 .selector2 類名的元素。

例如，在下面的 HTML 結構中：

<div class="container">
<h2 class="title">這是標題</h2>
<p class="text1">這是文本1</p>
<p class="text2">這是文本2</p>
<p class="text1">這是文本3</p>
<p class="text2">這是文本4</p>
</div>

如果我們要在 .title 和 .text2 元素之間插入一段樣式一致的文本，我們可以這樣編寫 CSS：

.title ~ .text2 {
font-weight: bold;
color: red;
}

這樣 .text2 和 .title 之間的所有同級元素都會應用這些樣式。

如果我們只需要將 .title 和 .text2 前面的一個同級元素應用這些樣式，我們可以這樣編寫CSS：

.title + .text2 {
font-weight: bold;
color: red;
}

這時，只有 .text1 元素會應用這些樣式。

總的來說，使用 ~ 和 + 選擇器可以很方便的選擇同級元素，為頁面的樣式提供更加靈活的選擇。