这可是个好东西，我也是这个星期才发现的，下面我们来说具体功能。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<style>

p:empty

{

	width:100px;

	height:20px;

	background:#ff0000;

}

</style>

</head>

<body>

<p></p>

<p>A paragraph.</p>

<p>Another paragraph.</p>

</body>

</html>

　　知道这代码运行后是怎样的吗？我们来看效果。

p标签里有内容的，就没有运行下面的代码，但是没有内容的p标签，渲染成了红色。

p:empty

{

	width:100px;

	height:20px;

	background:#ff0000;

}

　　

大家通过上面的例子，也能猜出这个伪类有什么作用了吧。没错，:empty选择器选择每个没有任何子级的元素（包括文本节点）。

我们来看下兼容性怎么样，要是兼容性不好，再大作用也是扯淡。下面是来自w3c的截图

哇，兼容性很不错哦！！ie9以下不兼容，但是有什么关系呢！谁让它叫做ie呢。珍爱生命，远离ie

CSS3 :empty 选择器的更多相关文章

  1. CSS系列：CSS3新增选择器

    1. CSS1定义的选择器 选择器 类型 说明 E 类型选择器 选择指定类型的元素 E#id ID选择器 选择匹配E的元素,且匹配元素的id为“id”,E选择符可以省略. E.class 类选择器 选 ...

  2. CSS3常用选择器（一）

    在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素.比如最常用到的#id,.class,标签选择器. 随着CSS3到来,增加了很多新型选择器,这里就常用的做一个总结. 1.属性选择器. 在c ...

  3. CSS3属性选择器与(:not)选择器

    一:css3属性选择器: img[alt]{ border:2px dashed #000; } 这个选择器会匹配页面标签中任何一个含有alt属性的图片标签.   还可以通过设定属性值来缩小匹配范围: ...

  4. 【前端开发系列】—— CSS3属性选择器总结

    想想自己为什么要学CSS,作为一个开发过前端的人员来说,调试一个图片花了半天的时间,最后发现分隔符用错了,实在是一件很丢人的事情.因此,痛下决心来学习CSS,最近一周也会更新下相关的学习笔记. CSS ...

  5. CSS3之选择器

    总结了下CSS3新增的一些选择器. CSS3的选择器有基本选择器.属性选择器.伪类选择器几类. CSS3选择器 选择器 举例 例子描述 element1~element2 p~a 选择前面有 < ...

  6. CSS3选择器02—CSS3部分选择器

    该部分主要为CSS3新增的选择器 接上一篇 CSS(CSS3)选择器(1) 一.通用兄弟选择器: 24:E ~ F,匹配任何E元素之后的同级F元素. div ~ p{ background-color ...

  7. CSS3 教程 选择器 标记一下防止 要找时404

    客 » Airen的博客 CSS3 选择器——基本选择器 作者:大漠 日期:2011-08-09 点击:6418  CSS的选择器,我想大家并不会陌生吧,因为天天在使用,但对于CSS3的选择器,要运 ...

  8. CSS选择器及CSS3新增选择器

    转自:http://www.cnblogs.com/libingql/p/4375354.html 1. CSS1定义的选择器 选择器 类型 说明 E 类型选择器 选择指定类型的元素 E#id ID选 ...

  9. [CSS3]移动Web开发系列之CSS3增强型选择器

    css3是移动Web开发的主要技术之中的一个.当前.CSS3技术最适合在移动Web开发中使用的特性有增强的选择器.阴影.强大的背景设置 .圆角边框 接下来我们主要解说增强型的选择器.主要分两种,属性选 ...

随机推荐

  1. Training Models

    In this page, I am going to talk about the 'hello world' model that is linear regression and train i ...

  2. 【转载】Android 内存溢出如何发生的。

    [转载]Android 内存溢出如何发生的. 且谈Android内存溢出 前言 关于android的内存溢出在创新文档库中也有不少,网络上也有很多这方面的资料.所以这遍文章不算是正真意义上的创新,仅仅 ...

  3. 机器人控制tcp通信参数调优

    机器人使用WiFi通信,实现指令下传,状态上传.而WiFi信道平时带宽较稳定,但会在某些时候突然中断,造成ping的延时较高,但可以马上恢复.如果一直ping,则一般情况下ping值很小,但长时间(数 ...

  4. lvs+keepalived详解

    常用软件安装及使用目录 资源链接:https://pan.baidu.com/s/15rFjO-EnTOyiTM7YRkbxuA    网盘分享的文件在此 官网:http://www.linuxvir ...

  5. 1.安装CDH5.12.x

    安装方式安装前准备安装步骤安装过程修改/etc/hosts设置ssh 互信修改linux 系统设置安装JDK1.8安装python2.7安装mysql/postgreysql数据库安装ntp设置本地y ...

  6. 嵌入式码农的10年Bug调试经验，值得一看

    下面这些都是我经历过的会导致难点bug的问题: 1.事件顺序.在处理事件时,提出下列问题会很有成效:事件可以以不同的顺序到达吗?如果我们没有接收到此事件会怎么样?如果此事件接连发生两次会怎么样?哪怕通 ...

  7. springMVC视图有哪些？-009

    html,json,pdf等. springMVC 使用ViewResolver来根据controller中返回的view名关联到具体的view对象. 使用view对象渲染返回值以生成最终的视图,比如 ...

  8. 选择正确的C/C++ runtime library

    本文是对http://www.davidlenihan.com/2008/01/choosing_the_correct_cc_runtim.html的翻译,如有错误,还请指正 c/c++运行库(ru ...

  9. 【Python】python-内置常量

    引言 Python的内置常量不多,只有6个,分别是True.False.None.NotImplemented.Ellipsis.__debug__ 一.True 1.True是bool类型用来表示的 ...

  10. java直接访问JNDI工具代码

    import java.sql.*; import java.util.*; import javax.naming.*; import javax.sql.DataSource; public cl ...