相鄰兄弟選擇器(Next-Sibling Combinator)用於選中指定元素緊接在後的第一個兄弟元素,忽略其他不緊接的兄弟元素。
想像一下,家裡有大哥、二姊、三妹、四弟,遛狗的任務通常是由年紀最大的大哥負責。可是如果大哥突然生病了,這時候誰來頂替呢?當然是緊接著的大哥之後的手足,也就是二姊啦!至於三妹和四弟?他們得等二姊忙不過來的時候才能輪到呢~
💠 相鄰兄弟選擇器-基本用法
語法
1 | 選擇器1 + 選擇器2 { |
- 選擇器1 是要選中的基準元素。
- 選擇器2 是相鄰於 選擇器1 的第一個兄弟元素。
範例
選中 .lala
類別後緊接著的第一個 <p>
元素
1 | <p>Lala 的哥哥</p> |
1 | .lala + p { |
在此範例中,只有接在 .lala
類別之後的 <p>
會變成紅色,最後一個 <p>
不會受到影響。
💠 實務應用:表單驗證提示訊息
當用戶未填寫必填欄位時,顯示錯誤提示:
1 | <label>帳號</label> |
1 | input:invalid + .error { |
有填寫時將隱藏錯誤驗證
See the Pen Next-sibling Combinator by Lala (@bobee) on CodePen.
在此範例中,當輸入框的值無效時,錯誤提示會顯示為紅色;當值有效時,錯誤提示會隱藏。💠 總結
相鄰兄弟選擇器(+
)選取元素中緊接著的第一個兄弟元素,適合用於處理需要依賴相鄰結構的樣式變化。
🚀實體工作坊分享
玩轉 Web頁面的前端技術(HTML/CSS/JS) 一日體驗課
最近時賦學苑開了實體體驗課,即使你對程式碼沒有概念也能上手!Lala 會帶你一起做出一個個人品牌形象網站,帶你快速了解前端的開發流程,快跟我們一起玩轉 Web 吧!🚀線上課程分享
線上課程可以加速學習的時間,省去了不少看文件的時間XD,以下是我推薦的一些課程想學習更多關於前後端的線上課程,可以參考看看。
Hahow
Hahow 有各式各樣類型的課程,而且是無限次數觀看,對學生或上班族而言,不用擔心被時間綁住六角學院
如果你是初學者,非常推薦六角學院哦!剛開始轉職也是上了六角的課,非常的淺顯易懂,最重要的是,隨時還有線上的助教幫你解決問題!
Udemy
Udemy 裡的課程非常的多,品質普遍不錯,且價格都滿實惠的,CP值很高!也是很多工程師推薦的線上課程網站。