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. Lombok - 使用注解让你的JavaBean变得更加简洁

    Lombok - 工具简介: Lombok是一个编译时注释预处理器,有助于在编译时注入一些代码.Lombok提供了一组在开发时处理的注释,以将代码注入到Java应用程序中,注入的代码在开发环境中立即可 ...

  2. 欧拉图Eulerian Graph

    一.节点的度 无向图:节点的度为该节点所连接的边数 有向图:节点的度分为入度和出度. 二.欧拉图定义 具有欧拉回路的图称作欧拉图,具有欧拉路径而无欧拉回路的图称为半欧拉图. 欧拉回路: ​ 通过图中每 ...

  3. 第五章 模块之 struct、dis、正则表达式、异常处理

    5.15 struct模块 pack 能够把所有的数字都固定的转换成4字节 5.16 dis dis.dis 查看计算机指令 5.16 正则表达式 基础 正则表达式概念: 是一种规则(元字符,量词) ...

  4. Python中turtle库的使用

    Turtle图形库 Turtle库是Python内置的图形化模块,属于标准库之一,位于Python安装目录的lib文件夹下,常用函数有以下几种: 画笔控制函数 penup():抬起画笔: pendow ...

  5. python检测挖矿特征的几种方式

    电脑性能上: ①cpu和内存使用率(常见): python 实时得到cpu和内存的使用情况方法_python_脚本之家https://www.jb51.net/article/141835.htm ② ...

  6. 《一头扎进》系列之Python+Selenium框架设计篇5 - 价值好几K的框架，哎呦！这个框架还真有点料啊！！！

    1. 简介 其实,到前面这一篇文章,简单的Python+Selenium自动化测试框架就已经算实现了.接下来的主要是介绍,unittest管理脚本,如何如何加载执行脚本,再就是采用第三方插件,实现输出 ...

  7. O(1) gcd 板子

    const int N = 2e5+10; const int M = 500; int cnt, p[N], _gcd[M][M]; int v[N][3],vis[N]; int gcd(int ...

  8. mac下卸载android studio

    Execute these commands from the terminal rm -Rf /Applications/Android\ Studio.app rm -Rf ~/Library/P ...

  9. 巧用XML格式数据传入存储过程转成表数据格式

    1.首先将后台数据转成对应的XML数据格式 /// <summary> /// 集合转XML数据格式 /// </summary> /// <param name=&qu ...

  10. py-1 语言介绍

    一.编程与编程语言 1.编程的目的 计算机的发明,是为了用机器取代并解放人力.而编程的目的则是将人类的思想流程按照某种能够被计算机识别的表达方式传递给计算机,从而达到让计算机能够像人脑.电脑一样自动执 ...