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. [转帖]HBase详解（很全面）

    HBase详解(很全面) very long story 简单看了一遍 很多不明白的地方.. 2018-06-08 16:12:32 卢子墨 阅读数 34857更多 分类专栏: HBase   [转自 ...

  2. struts笔记1

    框架:所谓框架,就是把一些繁琐的重复性代码封装起来,使程序员在编码中把更多的精力放到业务需求的分析和理解上面 SHH:strust spring hibernate; SSM:springmvc sp ...

  3. C++_向函数传递对象

    向函数传递对象 1. 使用对象作为函数参数 对象可以作为参数传递给函数,其方法与传递其他类型的数据相同. 在向函数传递对象时,是通过传值调用传递给函数的. 因此,函数中对对象的任何修改均不影响调用该函 ...

  4. sendmail邮箱部署设置

    前言:在使用一些shell脚本进行监控时需要通过发送报警邮件来提醒,下面通过部署简单的sendmail来实现简单的邮件发送. 1.安装 mailx 和 sendmail: yum install ma ...

  5. C 语言字符串的比较

    C 语言字符串的比较 #include <stdio.h> #include <Windows.h> #include <string.h> int main(vo ...

  6. docker 实践八：docker-compose

    本篇介绍 docker 官方三剑客之一的 docker-compose. 注:环境为 CentOS7,docker 19.03. docker-compose docker-compose 的前身是开 ...

  7. Hibernate持久化，生命周期

    一 .生命周期   1.1  . 说明 持久化类就是我们所说的实体类,实体类(持久化类)对象是有状态的. 为什么实体类对象会有状态? 答:由于HIbernate框架是一个先映射,后操作的框架.所谓的状 ...

  8. Consul作为SpringCloud配置中心

    一.背景介绍 在分布式系统中动态配置中,可以避免重复重启服务,动态更改服务参数等.一句话非常重要. 另外一篇文章也是这样说的,哈哈. Consul 作为Spring 推荐的分布式调度系统其也具备配置中 ...

  9. Gogs + Drone 实现CI/CD（CI）

    本文通过docker-compose方式安装运行drone,先将drone的server和agent镜像拉取到本地,这样docker-compose脚本执行速度会快一点.当然,不是必须先拉取drone ...

  10. git clone github上的项目失败 RPC failed

    error: RPC failed; curl 18 transfer closed with outstanding read data remainingfatal: the remote end ...