The :empty pseudo selector selects empty elements. We can use this to display useful messages instead of the empty content or hide the content completely. However, the :empty pseudo selector comes with a couple of potentially confusing behaviors when it comes to which elements it considers empty.

<!DOCTYPE html>

<html lang="">

  <head>

    <meta charset="utf-8" />

    <style type="text/css">

      p {

        background: rgb(255, 211, 233);

        margin-top: 10px;

        margin-bottom: 0px;

        padding: 10px;

      }

      // Be carefual that img is also considered as an empty element

      *:empty {

        display: none;

      }

    </style>

  </head>

  <body>

    <p></p>

    <p>Some content</p>

    <p></p>

    <img

      width="200px"

      height="200px"

      src="https://source.unsplash.com/user/erondu/daily"

    />

  </body>

</html>

[CSS] The :empty Pseudo Selector Gotchas的更多相关文章

  1. 【CSS】Intermediate7:Pseudo Elements

    1.selector:pseudo element{property:value;} 2.first-letter  first-line CSS3:: 与pseudo class 区别 old br ...

  2. 【CSS】Intermediate2:Pseudo Classes

    1.specify a state or relation to the selector selector:pseudo_class { property: value; } 2.Link 3.Dy ...

  3. [CSS] Target empty elements using the :empty pseudo-class

    You can target an element that has no child elements by using the :empty pseudo-class. With browser ...

  4. [CSS] DOM Hierarchy Pseudo Classes :first-child :last-child :nth-child (demystified)

    DOM hierarchy pseudo-classes allow you to style specific elements based on where they fall in the hi ...

  5. CSS元素选择器 element selector(type selector)

    http://www.w3school.com.cn/css/css_selector_type.asp 元素选择器 最常见的 CSS 选择器是元素选择器.换句话说,文档的元素就是最基本的选择器. 如 ...

  6. 阅读jQuery源码的18个惊喜

    注释:本文使用$.fn.method指代调用一系列选中的元素的方法.例如,$.fn.addClass,指代$('div').addClass(‘blue’) 或 $('a.active’).addCl ...

  7. Django项目：CRM(客户关系管理系统)--81--71PerfectCRM实现CRM项目首页

    {#portal.html#} {## ————————46PerfectCRM实现登陆后页面才能访问————————#} {#{% extends 'king_admin/table_index.h ...

  8. Django项目：CRM(客户关系管理系统)--57--47PerfectCRM实现CRM客户报名流程02

    图片另存为  16*16  名字修改为      bpm_logo.jpg /*! *bootstrap.js * * Bootstrap v3.3.7 (http://getbootstrap.co ...

  9. Django项目：CRM(客户关系管理系统)--47--38PerfectCRM实现全局账号登录注销02

    图片另存为  16*16  名字修改为      global_logo.jpg /*! *bootstrap.js * * Bootstrap v3.3.7 (http://getbootstrap ...

随机推荐

  1. tp5功能模块添加与调试

    在原先完善的功能基础上添加比如导出列表为excel ,一下子把所有属性写全了,出了问题,不好查找问题在哪? 所以遇到这种问题,需要最简单的测试.比如新建一个mysql表内就放一列一行数据.减少代码量, ...

  2. 题解 CF1216D 【Swords】

    大水题,感觉比C题水多了...(证明倒是挺难) 题目大意:额,这个(实在总结不出) 还是题目描述吧:仓库里有$n$种相同数量($x$把)的剑(但你不知道有多少),一天有$y$人闯进了仓库,每人拿了$z ...

  3. 接口缓存--把接口放在redis数据库中，减少访问量

    针对访问量大,且数据较固定的接口,建议建立接口缓存,建立了缓存之后,不会再直接去访问接口了. 比如下面的轮播图接口,每刷新一下首页都会访问一下轮播图接口,所以我们用接口缓存来处理,减少访问量. 视图模 ...

  4. linux终端提示符修改

    Linux主机名莫名其妙的由@myhostname变成了@bogon了之后 1.在linux下添加一个127.0.0.2名叫bogon的主机此方法使用后,bogon主机名得以解析,使用的主机名仍为bo ...

  5. RVA与RWA的关系

    RVA与RWA的关系 原理比较简单:首先判断这个地址是否在PE头中,如果在,文件偏移和内存偏移相等,如果存在于文件的区段中,则利用以下公式: 内存偏移 - 该段起始的RVA(VirtualAddres ...

  6. Asp.Net进阶/管家模式+发布订阅模式：练习

    现在需要实现一个需求:我需要在一个窗体中发送一个信息,其余几个窗体都能同时接收到发送的消息. 1.界面:一个管家窗体,1个主窗体,2个订阅者窗体.其中管家窗体为启动窗体. 2.订阅:2个订阅窗体订阅主 ...

  7. 一、ribbon如何集成在openfeign中使用

    所有文章 https://www.cnblogs.com/lay2017/p/11908715.html 正文 ribbon是springcloud封装的一个基于http客户端负载均衡的组件.spri ...

  8. Ubuntu下编译 Hadoop2.9

    Ubuntu 下编译 Hadoop-2.9.2 系统环境 系统: ubuntu-18.10-desktop-amd64 maven: Apache Maven 3.6.0 jdk: jdk_1.8.0 ...

  9. 【转载】Sqlserver使用SUBSTRING函数截取字符串

    在SQL语句查询过程中,Sqlserver支持使用LEFT().RIGHT().SUBSTRING()等几个函数对字符串进行截取操作,SubString函数相对于其他两个函数来说更灵活,使用场景更多, ...

  10. U盘因格式化 NTFS 中断造成无法识别，生产平台同样无法识别的修复处理方案

    特征: 电脑设备管理器(win10):识别到大容量存储设备 电脑磁盘管理:识别可移动磁盘无媒体 ChipGenius(v4_19_0319):能识别到制造商,但识别不到芯片具体型号 U盘相关生产平台: ...