:empty
伪类用来匹配空标签元素,例如:
.cs-empty:empty{
width: 120px;
padding: 20px;
border: 10px dashed;
}
此时,div 元素就会匹配:empty
伪类,呈现出虚线框,如下图
2.1 隐藏空元素
例如,某个模块里的内容是动态的,可能是列表,也可能是按钮,这些模块容器常包含影响布局的CSS属性,如margin、padding属性等。当然,这些模块里面有内容的时候,布局显示效果是非常好的,然儿一旦这些模块里面的内容为空,页面上就会有一块很大的明显的空白,效果就不好,这种情况下使用:empty
伪类控制一下就再好不过了:
.cs-module:empty {
display: none;
}
无需额外的JavaScript逻辑判断,直接使用CSS就可以实现动态样式效果,唯一需要注意的,当列表内容缺失的时候,一定要把空格也去掉,否则:empty
伪类不会匹配。
2.2 字段缺失智能提示
例如,下面的HTML
用户某些信息字段是缺失的,此时由于开发人员应该使用其他占位字符示意这里没有内容,如短横线(-)或者直接使用文字提示。但是多年的开发经验告诉我,开发人员非常容易忘记这里的特殊处理,最终导致布局混乱,信息难懂。
dt {
float: left;
}
但如今,我们就不用担心这样的合作问题了,直接使用CSS就可以处理这种情况,代码很简单:
dd:empty::before {
content: ‘暂无’;
color: gray;
}
此时字段缺失后的布局效果如下:
2.3 数据为空提示
实际开发中类似的场景还有很多。例如,表格中的备注信息经常都是空的,此时可以这样处理:
td:empty::before{
content: ‘-’;
color: gray;
}
除此之外,还有一类典型场景需要用到:empty
伪类,那就是动态Ajax加载数据为空的情况。当一个新用户进入一个产品的时候,很多模块内容是没有的。要是在过去,我们需要在Javascript代码中做 if 判断,如果没有值,我们要吐出”没有结果“或者”没有数据“的信息。但是现在,有了:empty
伪类,直接把这个工作交给CSS就可以了。例如:
.cs-search-module:empty::before{
content: ‘没有搜索结果’;
display: block;
line-height: 300px;
text-align: center;
color: gray;
}
又如:
.cs-article-module:empty::before{
content: ‘您还没有发布任何文章’;
display: block;
line-height: 300px;
text-align: center;
color: gray;
}
总之,这种方法非常好用,可以节约大量的开发时间,同时体验更好,维护更方便,因为可以使用同一个类名使整站提示信息保持一致:
.cs-article-module:empty::before{
content: '暂无数据;
display: block;
line-height: 300px;
text-align: center;
color: gray;
}
3. 用好:only-child伪类
:only-child
是一个很给力的伪类,尤其在处理动态数据的时候,可以省去很多写JavaScript逻辑的成本。
:only-child
意思是匹配没有任何兄弟元素的元素。例如,下面的 p 元素可以匹配:only-child
伪类,因为其前后没有其他兄弟元素:
确定删除该内容?
虽然.icon
元素后面有删除文字,但由于没有标签嵌套,是匿名文本,因此不影响.icon
元素匹配:only-child
伪类。
尤其需要使用:only-child
伪类的场景是动态场景,也就是某个固定小模块,根据场景的不用,里面可能是一个子元素,也可能是多个子元素,元素个数不同,布局方式也不同,此时就是:only-child
伪类大放异彩的时候。例如,某个加载元素(loading)模块里面可能就只有一张加载图片,也可能仅仅就是一段加载描述文字,也可能是加载图片和加载文字同时出现,此时:only-child
伪类就非常好用。
HTML示意如下:
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数初中级Android工程师,想要提升技能,往往是自己摸索成长,自己不成体系的自学效果低效漫长且无助。
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上Android开发知识点!不论你是刚入门Android开发的新手,还是希望在技术上不断提升的资深开发者,这些资料都将为你打开新的学习之门!
如果你觉得这些内容对你有帮助,需要这份全套学习资料的朋友可以戳我获取!!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!
HpKD3tKx-1715252710504)]
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上Android开发知识点!不论你是刚入门Android开发的新手,还是希望在技术上不断提升的资深开发者,这些资料都将为你打开新的学习之门!
如果你觉得这些内容对你有帮助,需要这份全套学习资料的朋友可以戳我获取!!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!