CSS 中的兄弟選擇器（Sibling Selector）可以選擇同一父元素下的兄弟元素。在這里，我們將學習如何使用兄弟選擇器并給出一個栗子。 舉個例子，當我們想要隱藏一個元素并將其重疊在另一個元素的上方時，可以使用 CSS 兄弟選擇器來實現。這種方法也被稱作“覆蓋隱藏”。 以下是樣式語法： ``` selector1 ~ selector2 { /* CSS 屬性 */ } ``` 其中，selector1 和 selector2 是 CSS 選擇器， ~ 是兄弟選擇器符號。樣式規則只會影響 selector2，當它是 selector1 的后代元素時。 因此，我們可以創建一個隱藏元素并使用兄弟選擇器，覆蓋到另一個元素之上： ``` /* 定義隱藏元素并設置背景色 */ .hide { display: none; background-color: #ddd; } /* 定義需要進行覆蓋隱藏的元素并設置背景色 */ .overlap { background-color: #fff; } /* 使用兄弟選擇器選擇 overlap 元素后的 hide 元素，并移動位置 */ .overlap ~ .hide { display: block; margin-top: -30px; } ``` 在上述例子中，.hide 元素是被隱藏的，當.overlap 元素后面有.hide 元素時，兄弟選擇器 ~ 就會生效，將.hide 元素覆蓋在.overlap 元素之上。 總結一下，CSS 兄弟選擇器可以用來選擇在同一父元素下的兄弟元素，并在需要時進行使用。例如，在上面的例子中，我們使用兄弟選擇器來創建重疊效果。這是實現 CSS 布局的一種非常有用的技術！