在CSS或前端開發(fā)中，選擇同級(jí)元素可通過(guò)兄弟選擇器實(shí)現(xiàn)。1. 使用相鄰兄弟選擇器（ ）可選中緊挨某元素的下一個(gè)兄弟元素，如h2 p僅對(duì)緊跟h2的p應(yīng)用樣式，適用于突出標(biāo)題下第一段文字或表單項(xiàng)后的提示文案；2. 使用通用兄弟選擇器（~）可影響所有符合條件的后續(xù)兄弟元素，如input:checked ~ label使所有后續(xù)label變綠，適合控制選項(xiàng)卡內(nèi)容顯示或?qū)崿F(xiàn)折疊面板；3. JavaScript中可用element.nextElementSibling和element.previousElementSibling獲取相鄰兄弟節(jié)點(diǎn)，結(jié)合循環(huán)可遍歷所有兄弟節(jié)點(diǎn)，用于動(dòng)態(tài)操作元素；4. CSS雖無(wú)反向選兄弟功能，但可通過(guò)Flex布局的order屬性等技巧間接實(shí)現(xiàn)類似效果。

在 CSS 或前端開發(fā)中，選擇同級(jí)元素（sibling elements）其實(shí)是一個(gè)很常見的需求，比如你想對(duì)某個(gè)元素之后或相鄰的兄弟元素做樣式調(diào)整。這時(shí)候就需要用到兄弟選擇器。

使用相鄰兄弟選擇器（ ）

這是最基礎(chǔ)的一種方式，用來(lái)選中緊挨著某個(gè)元素的下一個(gè)兄弟元素。

舉個(gè)例子：

h2   p {
  color: red;
}

這段代碼的意思是：所有緊跟著 h2 的 p 元素文字顏色變?yōu)榧t色。注意，只有緊跟其后的那個(gè)兄弟元素會(huì)被選中，其他的不會(huì)生效。

適用場(chǎng)景：

• 想要突出顯示標(biāo)題下面的第一段文字。
• 表單中某一項(xiàng)后面的提示文案需要特別樣式。

使用通用兄弟選擇器（~）

如果你希望不只是緊接的那個(gè)兄弟，而是所有符合特定條件的后續(xù)兄弟元素都應(yīng)用樣式，那就得用這個(gè)。

例子如下：

input:checked ~ label {
  color: green;
}

這段代碼的意思是：當(dāng)某個(gè) input 被選中時(shí)，它后面所有的 label 兄弟都會(huì)變成綠色字體。

適用場(chǎng)景：

• 切換選項(xiàng)卡（tab）時(shí)，控制對(duì)應(yīng)內(nèi)容區(qū)域的顯示。
• 實(shí)現(xiàn)純 CSS 的下拉菜單或折疊面板。

JavaScript 中如何操作兄弟節(jié)點(diǎn)？

有時(shí)候僅靠 CSS 不夠靈活，你需要通過(guò) JS 來(lái)獲取并操作兄弟元素。

常用方法有：

• element.nextElementSibling —— 獲取下一個(gè)兄弟節(jié)點(diǎn)（只看元素節(jié)點(diǎn)，忽略文本、注釋等）。
• element.previousElementSibling —— 獲取上一個(gè)兄弟節(jié)點(diǎn)。
• 遍歷所有兄弟節(jié)點(diǎn)可以結(jié)合 parent.children 再循環(huán)判斷。

示例：

const current = document.querySelector('.active');
const next = current.nextElementSibling;

if (next) {
  next.classList.add('highlight');
}

這樣你就可以動(dòng)態(tài)地操作當(dāng)前元素的兄弟節(jié)點(diǎn)了。

小技巧：CSS 中也可以“反向”選兄弟

雖然 CSS 沒(méi)有“前面的兄弟”選擇器，但你可以利用一些布局技巧實(shí)現(xiàn)類似效果。例如使用 Flex 布局時(shí)，可以通過(guò)設(shè)置 order 屬性來(lái)改變視覺順序，或者借助偽類和狀態(tài)聯(lián)動(dòng)達(dá)到目的。

總結(jié)一下，選擇兄弟元素的關(guān)鍵在于理解不同選擇器的作用范圍，并根據(jù)具體場(chǎng)景選擇合適的寫法?；旧暇瓦@些，不復(fù)雜但容易忽略細(xì)節(jié)。

以上是您如何選擇同級(jí)元素？的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！