在 CSS 中，如果我們想讓元素間保留一定的間隔，我們可以使用 margin 和 padding 屬性。但是，有時(shí)候我們可能想要給一組相關(guān)的元素添加相同的間隔，這時(shí)候就可以使用兄弟元素選擇器和縮進(jìn)來實(shí)現(xiàn)。

兄弟元素選擇器使用的是 ~ 符號(hào)，它可以選擇所有在指定元素之后的兄弟元素。結(jié)合縮進(jìn)，我們可以給這些兄弟元素添加相同的樣式。

/* 給所有在 class 為 container 之后的兄弟 div 元素添加 margin-top */
.container ~ div {
margin-top: 20px;
}
/* 縮進(jìn)版 */
.container {
/* 樣式 */
}
.container ~ div {
/* 樣式 */
}

在上面的例子中，我們給所有在 class 為 container 之后的兄弟 div 元素添加了一個(gè) margin-top 為 20px 的樣式。這樣所有在 container 之后的 div 元素都會(huì)有一個(gè)相同的間隔。

如果我們使用縮進(jìn)的寫法，就可以更清晰地看出這些 div 元素是屬于同一個(gè)組的：

.container {
/* 樣式 */
& ~ div {
/* 樣式 */
}
}

這里的 & 符號(hào)表示當(dāng)作為選擇器的一部分出現(xiàn)時(shí)，代表其前置選擇器。

兄弟元素選擇器和縮進(jìn)是一個(gè)非常方便的 CSS 技巧，它們可以讓我們輕松地對(duì)一組相關(guān)的元素添加相同的樣式。