在設計頁面時，我們經常會遇到類似這樣的頁面布局：
圖中乙個容器內有多個內容塊，每塊都有乙個底部的下劃線，但是一般為了美觀，最後乙個內容塊兒的下劃線是要去掉的
接下來我們看看通常情況下，是如何處理這種樣式的：
last類名用於清除border-bottom這樣的確完成可以解決問題，但卻存在乙個缺陷，那就是如果在新增完這些內容以後，又動態地要往這個容器內追加更多的內容時，上一次的最後乙個內容塊兒底部是沒有下劃線的，因為它被新增了乙個last類名，此時就類似於下拉載入更多這樣乙個場景，我們來非常簡單地模擬一下：
在上述**中可以很清晰地看到，每次載入的一段內容後，上一段內容的最後乙個內容塊兒底部是沒有下劃線的，這就非常得不友好了
接下來就來介紹乙個css小技巧來解決上述問題的尷尬
這裡可以用到css的兄弟選擇器，即element1 + element2，其表示的是選擇element1之後的處於同一層級的所有element2
我們來看一下具體的**實現：
.child + .child表示選擇類名為child之後的所有同一層級的類名為child的元素，因此第乙個類名為child的元素是無法被選擇到的，因此為了達到效果，我們選擇為選擇到的每個元素設定border-top，這樣就達到了想要的效果，並且即使之後動態地新增了更多的元素，也不會有什麼問題
效果驗證：
使得專案**更加簡潔
不會像傳統的處理方法那樣有多餘的類名
能適應動態改變的元素
希望這個小技巧對你們有所幫助
分享乙個微信小程式中css實用簡單技巧
1 用純css建立乙個三角形的原理把上 左 右三條邊隱藏掉 顏色設為 transparent demo 2 設定最高高度.超過後可以滑動 max height 550rpx overflow y scroll 3 text overflow 當屬性規定當文字溢位包含元素時發生的事情 clip 修剪文...
分享乙個實用任意路數PWM函式
一 什麼是pwm？1 科普一下什麼是pwm，嘿嘿，莫閒囉嗦，好好看看，可能大多數人聽過，但可能沒詳細了解過，至此不妨花費幾分鐘，詳細了解哈，pwm中文譯名為 脈衝寬度調製，即控制電路在輸出頻率不變的情況下，通過微控制器控制電平在乙個週期內輸出高低電平的比例來等效出模擬電壓的大小。舉個 栗子 吧 若電...
分享乙個php驗證碼程式 簡單 實用
廢話不說，直接上 header content type image gif 初始化 border 0 是否要邊框 1要 0不要 how 4 驗證碼位數 w how 15 寬度 h 20 高度 fontsize 5 字型大小 alpha abcdefghijkmnopqrstuvwxyz 驗證碼內容...