特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)
前段时间@Zell Liew的博客深入的介绍了CSS中伪选择器:empty
和:blank
相关的知识。那么:empty
和:blank
究竟有什么作用,又在什么场景下使用呢?今天我们来一起看看,它们怎么使用,更应该应用在哪个场景之下呢?
使用场景
我们平时做项目的时候,时常会使用一些CSS Frameworks,比如说有名的Bootstrap,在这种情况之下,使用的一些选择器,是带有一些默认样式。有的时候元素中并没有任何内容,那么在页面上显示的效果就有点怪异。比如下面这样的一个场景,你的页面上有两个.alert
的div
应用,其中一个有内容,另外一个任何内容都没有(就一个空div
)。比如:
<div class="alert alert-success">Success Alert</div>
<div class="alert alert-info"></div>
如果你的页面中引用了bootstrap.css
的话,这个时候看到的效果将会是这样:
对于这样的效果,估计没有人能接受。那么为什么会这样呢?来看一下代码,不难发现.alert
有一个默认的样式:
.alert {
position: relative;
padding: .75rem 1.25rem;
margin-bottom: 1rem;
border: 1px solid transparent;
border-radius: .25rem;
}
元素中主要有一个padding
,撑大了元素容器,就算元素没有任何内容,该元素也有一定的大小。就如上面看到的效果。那么我们有没有别的方法能处理呢?毕竟很多场景我们是不好控制元素的。
既然标题提到了:empty
和:blank
,估计有同学想到了解决方案是不是和这两个伪元素有关呢?如果感兴趣的话,可以接着往下阅读,在介绍相应的解决方案之前,咱们先来了解一下:empty
和:blank
。
:empty
和 :blank
首先,
:empty是什么?
:blank`又是什么?
简单的说,** :empty
和 :blank
都是CSS的伪选择器。其中:empty
可以让你选择 空元素 。空元素是指没有任何内容的元素,甚至空格都不行。即:
<div class="alert alert-info"></div>
如需转载,烦请注明出处:https://www.w3cplus.com/css/empty-vs-blank.html
如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!