近期看了我文章内容的都了解：我非常近在承担一个手机微信微信小程序的新项目，在这其中碰到了许多趣味的事和一些“奇思妙想”。文中的情况便是某一天早晨我觉得着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里将三个自变量用空格符相接接，再3D渲染到网页页面上就可以！
（实际上这儿是一个自定的挑选器，而全自动精准定位便是往高德地形图推送了恳求获得到省份区字段名罢了，编码也不写了。。。）
到这儿大家会发觉一个事：上边大家不但用了empty伪类，还用了before伪原素！
实际上这一点很平时 —— 终究仅有empty是加上不上內容的（好像纵览css，仅有before和after那样伪原素能够向网页页面中加上內容，无论是文本還是照片这类的）
我觉得更应当关心到的是2个地区：
:before 和 :after 伪原素向标识内插进內容、图型，其实不会危害empty伪类的配对！这一特点好用的一批。
由上，由此可见此伪类较大的用途便是“字段名缺少提醒”！它是十分好用的。并且把此项每日任务交到CSS还可以缓解很多“（合理布局）压力”、感受更强、维护保养起來也更便捷！
例如：我还在新项目提升时就将全部有恳求的字段名都再加了统一类名：
.ym-empty:empty::before{
content: "暂未数据信息，请再试",
display: block;
text-align: center;
color: rgba(0,0,0,.6);
/** 其他精准定位、字体样式变更实际操作 */
}
到此这篇有关CSS伪类:empty要我眼下一亮的文章内容就详细介绍到这了,大量有关CSS伪类empty內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容，期待大伙儿之后多多的适用脚本制作之家！
Copyright © 2002-2020 网页设计_移动端网页设计_大一网页设计作业成品_网页编辑软件_网页在线编辑 版权所有 （网站地图） 粤ICP备10235580号