CSS3 :empty 选择器
这可是个好东西，我也是这个星期才发现的，下面我们来说具体功能。
<!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 选择器的更多相关文章
- CSS系列：CSS3新增选择器
1. CSS1定义的选择器 选择器 类型 说明 E 类型选择器 选择指定类型的元素 E#id ID选择器 选择匹配E的元素,且匹配元素的id为“id”,E选择符可以省略. E.class 类选择器 选 ...
- CSS3常用选择器（一）
在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素.比如最常用到的#id,.class,标签选择器. 随着CSS3到来,增加了很多新型选择器,这里就常用的做一个总结. 1.属性选择器. 在c ...
- CSS3属性选择器与(:not)选择器
一:css3属性选择器: img[alt]{ border:2px dashed #000; } 这个选择器会匹配页面标签中任何一个含有alt属性的图片标签. 还可以通过设定属性值来缩小匹配范围: ...
- 【前端开发系列】—— CSS3属性选择器总结
想想自己为什么要学CSS,作为一个开发过前端的人员来说,调试一个图片花了半天的时间,最后发现分隔符用错了,实在是一件很丢人的事情.因此,痛下决心来学习CSS,最近一周也会更新下相关的学习笔记. CSS ...
- CSS3之选择器
总结了下CSS3新增的一些选择器. CSS3的选择器有基本选择器.属性选择器.伪类选择器几类. CSS3选择器 选择器 举例 例子描述 element1~element2 p~a 选择前面有 < ...
- CSS3选择器02—CSS3部分选择器
该部分主要为CSS3新增的选择器 接上一篇 CSS(CSS3)选择器(1) 一.通用兄弟选择器: 24:E ~ F,匹配任何E元素之后的同级F元素. div ~ p{ background-color ...
- CSS3 教程 选择器 标记一下防止 要找时404
客 » Airen的博客 CSS3 选择器——基本选择器 作者:大漠 日期:2011-08-09 点击:6418 CSS的选择器,我想大家并不会陌生吧,因为天天在使用,但对于CSS3的选择器,要运 ...
- CSS选择器及CSS3新增选择器
转自:http://www.cnblogs.com/libingql/p/4375354.html 1. CSS1定义的选择器 选择器 类型 说明 E 类型选择器 选择指定类型的元素 E#id ID选 ...
- [CSS3]移动Web开发系列之CSS3增强型选择器
css3是移动Web开发的主要技术之中的一个.当前.CSS3技术最适合在移动Web开发中使用的特性有增强的选择器.阴影.强大的背景设置 .圆角边框 接下来我们主要解说增强型的选择器.主要分两种,属性选 ...
随机推荐
- LeetCode - 463. Island Perimeter - O(MN)- (C++) - 解题报告
原题 原题链接 You are given a map in form of a two-dimensional integer grid where 1 represents land and 0 ...
- BZOJ 4557 JLOI2016 侦查守卫 树形dp
题目链接:https://www.lydsy.com/JudgeOnline/problem.php?id=4557 题意概述: 给出一棵树,每个点付出代价w[i]可以控制距离和它不超过d的点,现在给 ...
- Python学习之路3 - 字符串操作&字典
本节内容: 常用的字符串处理. 格式化输出字符串. 字符串的替换. 字符串和二进制的相互转化. 字典的操作 字符串操作 常用的字符串处理 name = 'vector' print(name.capi ...
- c# 删除word文档中某一页
object objPage = 14; int pages = oDoc.ComputeStatistics(Microsoft.Office.Interop.Word.WdStatistic.wd ...
- lintcode-184-最大数
184-最大数 给出一组非负整数,重新排列他们的顺序把他们组成一个最大的整数. 注意事项 最后的结果可能很大,所以我们返回一个字符串来代替这个整数. #### 样例 给出 [1, 20, 23, 4, ...
- iOS开发本地通知
/* 本地通知:不通过网络,在本地实现的通知,自己发给自己 远程通知:必须通过网络,使用推送技术(APNs),实现通知 本地通知: 1.要完成可以接收的通知形式的注册 2.具体通知的设置 3.发送通知 ...
- 3dContactPointAnnotationTool开发日志（七）
调了半天发现是逻辑错误,改了一下终于没那么奇怪了: 但是有的接触点很明显跑偏了.再回顾一下自己是怎么求的,我是直接用的下面的代码求解一个点是否在另一个物体内部: var bounds = us ...
- table与div互相嵌套注意
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- Android基础------高级ul：消息对话框
前言:Android消息对话框提示笔记,刚刚接触Android 1.经典模式 //列表对话框 //经典模式 public void listdialog_01(View view){ final St ...
- 【bzoj4903/uoj300】[CTSC2017]吉夫特 数论+状压dp
题目描述 给出一个长度为 $n$ 的序列,求所有长度大于等于2的子序列个数,满足:对于子序列中任意两个相邻的数 $a$ 和 $b$ ($a$ 在 $b$ 前面),${a\choose b}\mod 2 ...