最近看過我文章的都知道：我最近在負責一個微信小程式的專案，在其中遇到了很多有趣的事和一些“奇思妙想”，本文的背景就是某天早上我看著wxml檔案中一堆wx:if/else和hidden突然很煩躁，先不說wx:if導致的性能問題，就是標簽上也是冗雜的，
接著上一篇文章【微信小程式自定義組件庫yPicker組件分析及省市區三級聯動實作】，在其中我分析了這么一個例子 —— 省市區三級聯動的自定義實作，在其中有詳細代碼這里就不多說，說說如何呼叫：
我當時是這么想的：一方面出于“不在JavaScript里寫太多東西”的考慮，另一方面，由于省、市、區我是分別用三個變數來實作的，所以JavaScript里就關注這三個變數，比如之間的空格或其它東西都拿到wxml檔案里，就像這樣：
<view class="departments location" bindtap="fixedshow">
<view class="depart_title">所在位置</view>
<view wx:if="{{provinces&&citys&&areas}}" class="placeholder depart_content">{{provinces}} {{citys}} {{areas}}</view>
<view class="placeholder depart_content befselect" wx:else>請選擇當前位置</view>
<view class="desc">如有變動請修改后再次提交</view>
</view>
（因為呼叫涉及到后來改動的只有在點擊彈窗里的“確認”按鈕時在事件中將那三個變數分別賦給這段代碼中出現的三個變數 —— 否則會只要改動不管是點取消還是確認已經發生改變了，這樣不妥！）
其布局是這樣的：
.departments{
width: 100%;
height: 96rpx;
display: flex;
align-items: center;
font-size: 36rpx;
font-weight: 347;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.location{
position: relative;
border-bottom: 1rpx solid rgba(0,0,0,.009);
display: flex;
align-items: flex-start;
padding-top: 20rpx;
}
.desc{
position: absolute;
right: 19rpx;
bottom: 4rpx;
color: rgb(63,142,255);
font-size: 23rpx;
}
.departments .depart_title{
width: 20%;
}
.departments .depart_content{
margin-left: 10%;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.departments .placeholder{
width: 69%;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
在決定了要替換這里的wx:if以后，你首先要想：用什么替換？
wx:if作用是判斷“是否存在”，如果不存在（條件不滿足）就切換到wx:else或是wx:elif的邏輯里！
OK，想到這里，你應該能想到一個css偽類：:empty ！它的作用和我們想要的效果一樣：判斷如果元素（內容）為空的話…
我迅速對代碼做了改動：
<view class="departments location" bindtap="fixedshow">
<view class="depart_title">所在位置</view>
<view class="placeholder depart_content">{{provinces}} {{citys}} {{areas}}</view>
<view class="desc">如有變動請修改后再次提交</view>
</view>
然后在class - depart_content上加了這個偽類：
.placeholder:empty::before{
content: "請選擇當前位置";
color: rgba(0,0,0,.6);
}
一片空白！
經過查閱資料：:empty偽類表示如果標簽內容為空，那么內容區域如果帶有空格，也是不會被匹配到的！
在寫標簽時一定要注意這一點：標簽內是否有空格或換行！（換行常常被決議為一個空格）
遇到非單標簽一定注意閉合標簽！
最后解決辦法是：在js中將三個變數用空格相連接，再渲染到頁面上即可！
（其實這里是一個自定義的選擇器，而自動定位就是往高德地圖發送了請求獲取到省市區欄位而已，代碼就不寫了，，，）
到這里我們會發現一個事：上面我們不僅用了empty偽類，還用了before偽元素！
其實這一點很平常 —— 畢竟只有empty是添加不了內容的（似乎縱觀css，只有before和after這樣偽元素可以向頁面中添加內容，不管是文字還是圖片之類的）
我認為更應該關注到的是兩個地方：
- 偽元素中沒有用position定位！一般來說對一個（存在內容的）元素來說，為其設定“前置”（before）/“后置”（after）樣式都需要定位：規定其顯示的地方，不然大概率偽元素中的文字是顯示不出來的，通過本文的empty可以猜測：他被原本存在的內容覆寫住了，
- 從第一點可以得出：
:before和:after偽元素向標簽內插入內容、圖形，并不會影響empty偽類的匹配！
這個特性實用的一批，
由上，可見此偽類最大的用處就是“欄位缺失提示”！這是非常實用的，而且把這項任務交給CSS也可以減輕許多“（布局）負擔”、體驗更好、維護起來也更方便！
比如：我在專案優化時就將所有有請求的欄位都加上了統一類名：
.ym-empty:empty::before{
content: "暫無資料，請重試",
display: block;
text-align: center;
color: rgba(0,0,0,.6);
/** 其它定位、字體更改操作 */
}
CSDN認證博客專家
ECMAScript 6
Node.js
CSS
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/201669.html
標籤：其他
上一篇：css基礎知識最后補充：繼承、選擇器的權重、像素和百分比、em和rem、RGB值、HSL值以及HSLA值（萌新必看，大佬隨便）
下一篇：CSS偽類