CSS 元素的兄弟元素指的是在同一層級下,并且有相同的父元素的元素。通過 CSS 選擇器,我們可以很方便地選擇兄弟元素。
以下是選擇兄弟元素的 CSS 選擇器:
element1~element2 { // CSS 屬性 }
其中,element1 和 element2 是要選擇的兩個元素,~ 符號表示選擇 element1 后面的所有 element2 元素。
例如,我們要選擇 class 為 sibling 的元素的所有相鄰 sibling 元素:
.sibling~sibling { color: red; }
通過上面的代碼,我們將 sibling 的相鄰兄弟元素的字體顏色設置為紅色。
還有另一種選擇兄弟元素的 CSS 選擇器:
element1 + element2 { // CSS 屬性 }
其中,+ 符號表示選擇 element1 后面的第一個 element2 元素。
例如,我們要選擇 class 為 sibling 的元素的相鄰第一個 sibling 元素:
.sibling+sibling { text-decoration: underline; }
通過上面的代碼,我們將 sibling 的第一個相鄰兄弟元素的字體下劃線設置為單線。
總結來說,CSS 元素的兄弟元素很重要,可以方便地選擇相鄰的元素并進行樣式設置。
上一篇css 元素邊框的距離
下一篇css 元素的父節點選中