Less混合結合:nth-child()選擇器的高級玩法
1、先看效果圖
上圖中比較麻煩的是每塊的底色處理，下面看怎麼處理👇
2、:nth-child(n) 選擇器
匹配屬於其父元素的第 N 個子元素，不論元素的類型。
n 可以是數字、關鍵詞或公式。
-
數字：最常見的使用方式，eg: :nth-child(1)
-
關鍵詞: Odd 和 even 是可用於匹配下標是奇數或偶數的子元素的關鍵詞（第一個子元素的下標是 1）。
-
公式: 使用公式 (an + b)。描述：表示周期的長度，n 是計數器（從 0 開始），b 是偏移值。
3、主要思路：
-
運用less混合傳參，參數既是 :nth-child(n) 選擇器的公式
-
在混合裡面處理每個原色的底色，通過 :nth-child(n) 選擇器結合 ::after 偽元素實現。
有了思路之後，下面讓我們看一下具體的程式碼實現👇
4、程式碼實現
以下只貼顏色處理的核心程式碼👇
.colorLine(@index, @startColor, @endColor) {
.li-item:nth-child(@{index})::after {
background: linear-gradient(136deg, @startColor, @endColor);
}
}
.colorLine(1n, rgba(255, 122, 109, 1), rgba(255, 77, 62, 1));
.colorLine(2n, rgba(93, 219, 224, 1), rgba(0, 188, 218, 1));
.colorLine(3n, rgba(59, 220, 72, 1), rgba(92, 209, 46, 1));
.colorLine(4n, rgba(254, 190, 43, 1), rgba(255, 163, 0, 1));
.colorLine(5n, rgba(148, 117, 247, 1), rgba(119, 83, 233, 1));
4.1、程式碼說明：
通過Less混合傳參，實現指定了下標是 1,2,3,4,5 的倍數的所有 li-item 元素的偽元素背景色。
🎈🎈🎈
🌹 持續更文，關注我，你會發現一個踏實努力的寶藏前端😊，讓我們一起學習，共同成長吧。
🎉 喜歡的小夥伴記得點贊關注收藏喲，回看不迷路 😉
✨ 歡迎大家評論交流，蟹蟹😊
