Day11-相鄰兄弟選擇器-兄弟情深，只挑最近的！

相鄰兄弟選擇器（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> 不會受到影響。

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

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

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

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

有填寫時將隱藏錯誤驗證

See the Pen Next-sibling Combinator by Lala (@bobee) on CodePen.

在此範例中，當輸入框的值無效時，錯誤提示會顯示為紅色；當值有效時，錯誤提示會隱藏。

---

💠 總結

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

🚀線上課程分享

線上課程可以加速學習的時間，省去了不少看文件的時間XD，以下是我推薦的一些課程
想學習更多關於前後端的線上課程，可以參考看看。

Hahow

Hahow 有各式各樣類型的課程，而且是無限次數觀看，對學生或上班族而言，不用擔心被時間綁住

六角學院

如果你是初學者，非常推薦六角學院哦！
剛開始轉職也是上了六角的課，非常的淺顯易懂，最重要的是，隨時還有線上的助教幫你解決問題！

Udemy

Udemy 裡的課程非常的多，品質普遍不錯，且價格都滿實惠的，CP值很高！
也是很多工程師推薦的線上課程網站。