最近看過我文章的都知道：我最近在負(fù)責(zé)一個(gè)微信小程序的項(xiàng)目，在其中遇到了很多有趣的事和一些“奇思妙想”。本文的背景就是某天早上我看著wxml文件中一堆wx:if/else和hidden突然很煩躁，先不說wx:if導(dǎo)致的性能問題，就是標(biāo)簽上也是冗雜的。

接著上一篇文章【微信小程序自定義組件庫yPicker組件分析及省市區(qū)三級聯(lián)動(dòng)實(shí)現(xiàn)】，在其中我分析了這么一個(gè)例子 —— 省市區(qū)三級聯(lián)動(dòng)的自定義實(shí)現(xiàn)，在其中有詳細(xì)代碼這里就不多說，說說如何調(diào)用：

我當(dāng)時(shí)是這么想的：一方面出于“不在JavaScript里寫太多東西”的考慮，另一方面，由于省、市、區(qū)我是分別用三個(gè)變量來實(shí)現(xiàn)的，所以JavaScript里就關(guān)注這三個(gè)變量，比如之間的空格或其它東西都拿到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>請選擇當(dāng)前位置</view>
  <view class="desc">如有變動(dòng)請修改后再次提交</view>
</view>

（因?yàn)檎{(diào)用涉及到后來改動(dòng)的只有在點(diǎn)擊彈窗里的“確認(rèn)”按鈕時(shí)在事件中將那三個(gè)變量分別賦給這段代碼中出現(xiàn)的三個(gè)變量 —— 否則會(huì)只要改動(dòng)不管是點(diǎn)取消還是確認(rèn)已經(jīng)發(fā)生改變了，這樣不妥?。?/p>

其布局是這樣的： 

.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，想到這里，你應(yīng)該能想到一個(gè)css偽類：:empty ！它的作用和我們想要的效果一樣：判斷如果元素（內(nèi)容）為空的話…
我迅速對代碼做了改動(dòng)：

<view class="departments location" bindtap="fixedshow">
  <view class="depart_title">所在位置</view>
  <view class="placeholder depart_content">{{provinces}} {{citys}} {{areas}}</view>
  <view class="desc">如有變動(dòng)請修改后再次提交</view>
</view>

然后在class - depart_content上加了這個(gè)偽類：

.placeholder:empty::before{
  content: "請選擇當(dāng)前位置";
  color: rgba(0,0,0,.6);
}

一片空白！

經(jīng)過查閱資料：:empty偽類表示如果標(biāo)簽內(nèi)容為空，那么內(nèi)容區(qū)域如果帶有空格，也是不會(huì)被匹配到的！

在寫標(biāo)簽時(shí)一定要注意這一點(diǎn)：標(biāo)簽內(nèi)是否有空格或換行?。〒Q行常常被解析為一個(gè)空格）
遇到非單標(biāo)簽一定注意閉合標(biāo)簽！

最后解決辦法是：在js中將三個(gè)變量用空格相連接，再渲染到頁面上即可！
 

（其實(shí)這里是一個(gè)自定義的選擇器，而自動(dòng)定位就是往高德地圖發(fā)送了請求獲取到省市區(qū)字段而已，代碼就不寫了。。。）

到這里我們會(huì)發(fā)現(xiàn)一個(gè)事：上面我們不僅用了empty偽類，還用了before偽元素！

其實(shí)這一點(diǎn)很平常 —— 畢竟只有empty是添加不了內(nèi)容的（似乎縱觀css，只有before和after這樣偽元素可以向頁面中添加內(nèi)容，不管是文字還是圖片之類的）

我認(rèn)為更應(yīng)該關(guān)注到的是兩個(gè)地方：

• 偽元素中沒有用position定位！一般來說對一個(gè)（存在內(nèi)容的）元素來說，為其設(shè)置“前置”（before）/“后置”（after）樣式都需要定位：規(guī)定其顯示的地方。不然大概率偽元素中的文字是顯示不出來的，通過本文的empty可以猜測：他被原本存在的內(nèi)容覆蓋住了。
• 從第一點(diǎn)可以得出：:before 和 :after 偽元素向標(biāo)簽內(nèi)插入內(nèi)容、圖形，并不會(huì)影響empty偽類的匹配！

這個(gè)特性實(shí)用的一批。

由上，可見此偽類最大的用處就是“字段缺失提示”！這是非常實(shí)用的。而且把這項(xiàng)任務(wù)交給CSS也可以減輕許多“（布局）負(fù)擔(dān)”、體驗(yàn)更好、維護(hù)起來也更方便！

比如：我在項(xiàng)目優(yōu)化時(shí)就將所有有請求的字段都加上了統(tǒng)一類名：

.ym-empty:empty::before{
	content: "暫無數(shù)據(jù)，請重試",
	display: block;
	text-align: center;
	color: rgba(0,0,0,.6);
	/** 其它定位、字體更改操作 */
}

到此這篇關(guān)于CSS偽類:empty讓我眼前一亮的文章就介紹到這了,更多相關(guān)CSS偽類empty內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評論