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. php面向对象之封装

    OOP三大特性:封装.继承和多态,简称封继态. 封装 类2使用关键字extends继承类1,之后,类1为类2的父类,简称父类,类2是类1的子类,简称子类.使用关键字new,实例化类1,得到对象1,对象 ...

  2. CH09 开机自动烧录QSPI

    版本信息: 版本 REV2018 时间 05/22/2018       XILINX ZYNQ LINUX篇 基于米联MZ7X系列                       电子版自学资料   常 ...

  3. 深夜扒一扒Android的发展史

    说道,Android的发展史,我们就不得不先来了解一下手机的发展史 Android之前的时代 1831年英国的法拉第发现了电磁感应现象,麦克斯韦进一步用数学公式阐述了法拉第等人的研究成果,并把电磁感应 ...

  4. Docker从入门到掉坑(五)：继续挖一挖 k8s

    在之前的几篇文章中,主要还是讲解了关于简单的docker容器该如何进行管理和操作及k8s上手避坑,在接下来的这篇文章开始,我们将继续对k8s模块的学习 pod是啥 在k8s里面,有很多新的技术概念,其 ...

  5. react实现设置答题器选项个数

    一,设置答题器选项import React, { useState, useEffect } from 'react' import PropTypes from 'prop-types' impor ...

  6. 撸一个 vue 的截图组件，按比例截取

    <template> <div class="clip-img" :style="imgStyle"> <img :src=&qu ...

  7. python+django早教课程

    虚拟环境安装项目中需要安装许多插件,为不影响系统的环境,可以为项目新建一个虚拟环境,所有的早教课程安装包在该虚拟环境中独有,以防影响其他项目.1. 安装虚拟环境:pip install virtual ...

  8. ReactNative报错null is not an object (evaluating '_rngesturehandlermodule.default.direction')

    程序报错: null is not an object (evaluating 'rngesturehandlermodule.default.direction') 解决: react-native ...

  9. Java 之 字符流

    一.字符流 当使用字节读取文本文件时,可能会有一个小问题,就是遇到中文字符时,可能不会显示完整的字符,那是因为一个中文字符可能占用多个字节存储.所以 Java 提供了一些字符类,以字符为单位读写数据, ...

  10. 在oracle中存入date类型数据遇到的问题及其解决方法（利用java.sql.date和Timestamp）

    转自:https://blog.csdn.net/ShadowerWArden/article/details/80652377 1. 使用JDBC操作Oracle数据库时,使用java.sql.Da ...