相鄰兄弟選擇器（Next-Sibling Combinator）用於選中指定元素緊接在後的第一個兄弟元素，忽略其他不緊接的兄弟元素。

想像一下，家裡有大哥、二姊、三妹、四弟，遛狗的任務通常是由年紀最大的大哥負責。可是如果大哥突然生病了，這時候誰來頂替呢？當然是緊接著的大哥之後的手足，也就是二姊啦！至於三妹和四弟？他們得等二姊忙不過來的時候才能輪到呢～

💠相鄰兄弟選擇器-基本用法

語法

選擇器1 + 選擇器2 {
	屬性名: 屬性值;
}

• 選擇器1 是要選中的基準元素。
• 選擇器2 是相鄰於 選擇器1 的第一個兄弟元素。

範例

選中 .lala 類別後緊接著的第一個 <p> 元素

<p>Lala 的哥哥</p>
<div class="lala">Lala</div>
<p>Lala 的大妹</p>
<p>Lala 的小弟</p>

.lala + p {
	color: red;
}

在此範例中，只有接在 .lala 類別之後的 <p> 會變成紅色，最後一個 <p> 不會受到影響。

💠實務應用：表單驗證提示訊息

一起試試：[CODEPEN]

當用戶未填寫必填欄位時，顯示錯誤提示：

<label>帳號</label>
<input type="text" required>
<span class="error">此欄位必填</span>

input:invalid + .error {
  display: inline;
  color: red;
}
input:valid + .error {
  display: none;
}

有填寫時將隱藏錯誤驗證

在此範例中，當 <input> 元素的值無效時，錯誤提示會顯示為紅色；當值有效時，錯誤提示會隱藏。

💠總結

相鄰兄弟選擇器（+）選取元素中緊接著的第一個兄弟元素，適合用於處理需要依賴相鄰結構的樣式變化。

本文將同步更新至 Lala Code