被遗忘了的css伪类:empty

2019-04-22263次阅读csscss3

第一版

1、弹窗内容盒子通过定位position:absolute;left:50%.....实现水平垂直居中。

2、类名popup盒子是通过javascript修改全局属性hidden来实现弹窗的显示与隐藏。

<div class="popup" hidden>
  <div class="pop-wrap">弹窗内容</div>
</div>
<script>
//false为显示,true为隐藏
document.querySelector('.popup').hidden = false;
</script>

第二版

1、弹窗内容盒子通过Flexbox弹性布局实现水平垂直居中

.popup{
  position:fixed;
  left:0;
  right:0;
  top:0;
  bottom:0;
  background-color:rgba(0,0,0,.7);
  display:flex;
}

.pop-wrap{
  background-color:#fff;
  margin:auto;
  font-size:1.6rem;
  width:16rem;
  padding:5rem;
  border-radius:.6rem;
}

MDN中全局属性hidden一文中有如下说明:

改变具有hidden属性的元素的CSS的 display 属性将覆盖该行为。 例如, 元素被设置为 display: flex 将会导致元素显示出来,尽管设置了hidden属性。

我泪奔了....

2、只能通过javascript修改popup盒子css的display:none|flex来实现弹窗的显示与隐藏。

功能是实现了,但老觉得有点Low。也可能是我遗忘了什么。。。

如果您是CSS新手,您使用的选择器可能仅限于类名,ID和通用元素。实际上,总共有38个CSS选择器,其复杂程度差别很大。有些选择器可能是我们很少使用的例如:empty伪类。

:empty

:empty伪类代表没有子元素的元素。子元素只可以是元素节点或文本(包括空格),但不包括html注释。浏览器兼容:IE9+

<!-- 这些将是空的 -->
<div></div>
<div><!-- comment --></div>

<!-- 这些将不能满足为空 -->
<div>foo</div>
<div>  </div>
<div><span></span></div>
<div>  <!-- comment -->  </div>

:empty伪类的特性可以让我们联想到它非常适合在弹窗、消息提示框等场景下使用。可以根据上下文动态地插入和移除它们中的文本内容。使用:empty伪类,我们可以确保在没有内容的情况下,该框将被隐藏。

第三版

css表现:

.popup{
  position:fixed;
  left:0;
  right:0;
  top:0;
  bottom:0;
  background-color:rgba(0,0,0,.7);
  display:flex;
}
.popup:empty{
  display:none;
}
.pop-wrap{
  background-color:#fff;
  margin:auto;
  font-size:1.6rem;
  width:16rem;
  padding:5rem;
  border-radius:.6rem;
}

html结构:

<div class="popup"></div>

javascript行为:

//popup显示
document.querySelector('.popup').innerHTML = '<div class="pop-wrap">弹窗内容</div>';
//popup隐藏
//document.querySelector('.popup').innerHTML = '';

 

上一篇: 常用的HTML DOM nextElementSibling属性简介  下一篇: js大小写转换  

被遗忘了的css伪类:empty相关文章