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

<!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. Python变量常量及注释

    一.变量命名规则1.有字母.数字.下划线搭配组合而成2.不能以数字开头,更不能全为数字3.不能用Python的关键字4.不要太长5.名字要有意义6.不要用中文7.区分大小写8.采用驼峰体命名(多个单词 ...

  2. HTML5 canvas制作童年的回忆大风车

    今天看到一篇CSS3写的大风车http://www.cnblogs.com/yaojaa/archive/2013/01/30/2882521.html,感觉CSS3太神奇了,这在以前用CSS是想都不 ...

  3. SDUST OJ 时间类的加、减法赋值运算

    Problem F: 时间类的加.减法赋值运算 Time Limit: 3 Sec  Memory Limit: 128 MBSubmit: 3801  Solved: 2210[Submit][St ...

  4. Alpha 冲刺4

    队名:日不落战队 安琪(队长) 今天完成的任务 组织第四次站立式会议. 完成40%草稿箱前端界面. 明天的计划 剩下的60%草稿箱前端界面. 如果还有时间,尝试去调用数据. 还剩下的任务 回收站前端界 ...

  5. iOS开发UUIView动画方法总结

    #动画设置 UIView动画实现 @interface ViewController () @property (weak, nonatomic) IBOutlet UIView *myView; @ ...

  6. File文件以及.propertites文件操作

    File文件操作 在jsp和class文件中调用的相对路径不同.在jsp里,根目录是WebRoot 在class文件中,根目录是WebRoot/WEB-INF/classes 当然你也可以用Syste ...

  7. 【bzoj1212】[HNOI2004]L语言 AC自动机

    题目描述 标点符号的出现晚于文字的出现,所以以前的语言都是没有标点的.现在你要处理的就是一段没有标点的文章. 一段文章T是由若干小写字母构成.一个单词W也是由若干小写字母构成.一个字典D是若干个单词的 ...

  8. Python 文件对象和方法

    Python文件对象和方法 1.打开和关闭文件 Python提供了必要的函数和方法进行默认情况下的文件基本操作,我们可以用file对象做大部分文件操作. open()方法 我们必须先用Python内置 ...

  9. CSS3 边框 圆角 背景

    CSS3用于控制网页的样式布局. CSS3是最新的CSS标准.   关于transform: transform:rotate(10deg);//顺时针方向旋转10° 浏览器支持情况:低版本的IE浏览 ...

  10. hdu 2050 折线分割平面 (递推)

    折线分割平面 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Subm ...