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. Java的设计模式（7）— 生产者-消费者模式

    生产者-消费者模式是一个经典的多线程设计模式,它为多线程间的协作提供了良好的解决方案.这个模式中,通常有两类线程,即若干个生产者线程和若干个消费者线程.生产者线程负责提交用户请求,消费者线程则负责具体 ...

  2. Go语言学习笔记(10)——错误处理示例

    // 定义一个 DivideError 结构 type DivideError struct { dividee int divider int } // 实现 `error` 接口 func (de ...

  3. IIS不能下载config配置文件的解决方法

    之前作程序升级的时候,需要从服务端下载后缀为config的配置文件,结果程序抛出404异常.后来百度才知道,是IIS禁止下载config文件的原因.在这里记录一下解决方法. 在我的电脑,右键管理,打开 ...

  4. window服务器查看管理员列表

    快捷键win+R 输入cmd并进入 输入指令net localgroup administrators

  5. C#使用管理员权限打开cmd执行命令行

    最近遇到个棘手的问题,服务器远程连不上,但是ftp可以,可能远程连接的服务挂了或者防火墙入站规则有点问题,想要重启,得找机房工作人员,还是挺麻烦的 想了想可以上传个执行cmd命令的东西,然后远程访问触 ...

  6. Error while launching application Error: spawn ENOMEM 解决

    当NodeJs PM2 无法启动应用 出现 Error while launching application Error: spawn ENOMEM 错误时     执行一下  pm2 update ...

  7. 怎样查看python的所有关键字

    关键字是python中具有特定功能的一组词汇, 这些词汇不能用作变量名, 一般会有高亮提示, code时请小心. python的关键字其实也是python的语法核心, 掌握了所有python关键字的用 ...

  8. ORACLE锁表查询及解锁方法

    --查看锁表情况 select distinct a.sid, to_char(a.logon_time, 'YYYY-MM-DD HH24:mi:ss') loginTime, a.serial#, ...

  9. 利用WkHtmlToPdf，把H5 转成PDF

    工具下载地址: 链接:https://pan.baidu.com/s/1TSq2WWZcvPwuIfPRHST-FA 提取码:wkx8 原理: 通过IIS访问页面,利用WkHtmlToPdf.exe, ...

  10. C++开源库大全

        标准库 C++ Standard Library:是一系列类和函数的集合,使用核心语言编写,也是C++ISO自身标准的一部分. Standard Template Library:标准模板库 ...