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.

  1. <!DOCTYPE html>
  2. <html lang="">
  3.   <head>
  4.     <meta charset="utf-8" />
  5.     <style type="text/css">
  6.       p {
  7.         background: rgb(255, 211, 233);
  8.         margin-top: 10px;
  9.         margin-bottom: 0px;
  10.         padding: 10px;
  11.       }
  12.       // Be carefual that img is also considered as an empty element
  13.       *:empty {
  14.         display: none;
  15.       }
  16.     </style>
  17.   </head>
  18.  
  19.   <body>
  20.     <p></p>
  21.     <p>Some content</p>
  22.     <p></p>
  23.     <img
  24.       width="200px"
  25.       height="200px"
  26.       src="https://source.unsplash.com/user/erondu/daily"
  27.     />
  28.   </body>
  29. </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. Word 下划线无法对齐？用表格替代下划线（论文封面必备）

    1. 前言 在使用Word排版制作合同或者论文封面时,我们可能会使用一些下划线,但是,你在下划线上输入内容后,发现下划线会随着内容而增长,根本无法与上下的下划线对齐.有什么好办法可以解决这一问题呢?其 ...

  2. thinkphp5.0数据导出excel表格

    第一步.创建Model类文件(名称自定) 第二步.在类中写入以下代码 <?php namespace Admin\admin\model; use think\Model; class Mark ...

  3. python第二天---字符串的魔法

    # "adcbdefg" # "a" # 判断某个东西是否在里面包含 in | not in # name = "abcdefg" # # ...

  4. Linux中光标消失解决办法

    假如Linux下光标消失,不要急: echo -e "\033[?25l"  隐藏光标 echo -e "\033[?25h" 显示光标 (转载自:https: ...

  5. 从其他数据库迁移到MySQL及MySQL特点

    从其他数据库迁移到MySQL Oracle,SQL Server迁移到MySQL 一些变化 不再使用存储过程.视图.定时作业 表结构变更,如采用自增id做主键,以及其他语法变更 业务SQL改造,不使用 ...

  6. 11款航拍辅助APP【转】

    盘点丨11款航拍辅助APP_宇辰网_让世界读懂无人机_全球专业无人机资讯|电商|大数据服务平台

  7. SAS学习笔记53 RTF单个字符标记设置

    如何设置RTF中某一个字斜体而之后的字不斜体.下图中第一个P值都斜体并且加粗,第二个P值只有P进行了斜体和加粗

  8. RuntimeError: Model class users.models.UserProfile doesn't declare an explicit app_label and isn't in an application in INSTALLED_APPS.

    Django启动的时候报错 File "/home/hehecat/PycharmProjects/MxShop/MxShop/urls.py", line 23, in from ...

  9. Neo4J之标签类型

    Neo4J的标签可以理解一个类,在创建一个节点时可以设置一个或多个标签: 1. 标签名为中文(可以) CRATE(节点名:标签1:标签2{属性1:34} 创建了一个节点名为“节点名”的节点(不可以用节 ...

  10. linux 系统运维工具13款

    1. 查看进程占用带宽情况 - Nethogs Nethogs 是一个终端下的网络流量监控工具可以直观的显示每个进程占用的带宽. 下载:http://sourceforge.net/projects/ ...