:empty

种类：伪类选择器

版本：CSS3.0

用法：匹配每个没有子元素(包含文本)的元素。

例子：

<!DOCTYPE html>

<html>

<head>

    <title>test008_伪类选择器empty</title>

    <style type="text/css">

        div{

            width: 100px;

            height: 100px;

            background-color: white;

        }

        div:empty{

            background-color: red;

        }

    </style>

</head>

<body>

    <div><p></p></div>

    <div>hello world</div>

    <div>

    </div>

    <div></div>

</body>

</html>

在这个例子里，一共有四个div。

结果，只有第四个div背景为红色。

第一个和第二个div有内容，不用说。

第三个div有空格，也属于内容，所以也不在empty的选择范围内。

CSS3伪类 :empty的更多相关文章

  1. CSS3 伪类选择器 nth-child() 的用法

    伪类选择器 nth-child() 在IE6-8和FF3.0-浏览器不支持,CSS3中nth-of-type(n)(比如nth-of-type(1))这个特殊的类选择符可以样式更加个性的标题和段落等, ...

  2. CSS3伪类nth-child结合transiton动画实现文字若影若现

    css3伪类nth-child结合transiton动画实现文字若影若现收先创建一个div盒子,然后包裹在div中的有10个span标签每个span标签填上内容一次为A,B,C,D,E,F,G,H,I ...

  3. CSS3伪类和伪元素

    作为一个CSS3初学不久者来说,很容易混淆单冒号(:)和双冒号(::)的用法,以为两者可以互换着来使用.我自己之前也混淆过他们,因为两者看起来太相像了,就像孪生兄弟.但实际上,他们的区别还是挺大的,最 ...

  4. Selectivizr-让IE6~8支持CSS3伪类和属性选择器

    一.下载和demo 下载: 您可以狠狠地点击这里:selectivizr-1.0.0.zip(右键-[目标|链接另存为] 9.24K) demo: 您可以狠狠地点击这里:Selectivizr部分属性 ...

  5. 利用CSS3伪类做3D按钮

    这是通过css3伪类实现的3d按钮,html代码为: <div id="container_buttons"> <p><a class="a ...

  6. jQuery实现隔行变色、悬停变色 （ CSS3伪类选择器：nth-child() ）

    <title>实现隔行变色</title> <script src="Js/jquery-1.8.0.min.js" type="text/ ...

  7. css3 -- 伪类与伪元素

    伪类: 1.结构伪类 A:E : first-child{} E : nth-*(n){} E : first-*(even){}  E : first-*(odd){} B:nth-child 是根 ...

  8. 巧用CSS3伪类选择器自定义checkbox和radio的样式

    由于原生的checkbox和radio的样式太简陋了,在设计页面的时候,设计师往往会设计自己的checkbox和radio样式.一半情况下,为了适应各个浏览器的兼容性,我们都会用其他的元素替代原生的c ...

  9. 玩转CSS3,嗨翻WEB前端,CSS3伪类元素详解/深入浅出[原创][5+3时代]

    在我的上一篇博客中, 很多园友提出说对css3"画图"不是很理解, 在跟他们私聊了一段时间以后,加上自己在开始自学css3的时候的疑惑,我觉得大家之所以不是很理解主要是因为对伪元素 ...

随机推荐

  1. Task.Result跟 Task.GetAwaiter.GetResult()相同吗？怎么选？

    前几天在用线程池执行一些任务时运到一种情形,就是回调方法中使用到了异步方法,但是回调方法貌似不支持async await的写法.这时候我应该如何处理呢?是使用Task.Result来获取返回结果,还是 ...

  2. 使用本地http的yum源

    使用http作为本地yum源 场景 在生产环境中,有大概好几十台linux同系统版本的操作系统,为了安装普通软件,现在的做法是向每台机器上上传一个iso镜像,然后将镜像挂在,配置本地的yum源,实现基 ...

  3. 【解读】TCP协议

    本文内容如下:      1)TCP协议概念      2)TCP头部结构和字段介绍      3)TCP流量控制            滑动窗口      4)TCP拥塞控制           慢 ...

  4. 基于MarkDown和Github图床以及SourceTree的一站式文章编辑和发布

    标题: 基于MarkDown和Github图床以及SourceTree的一站式文章编辑和发布 作者: 梦幻之心星 sky-seeker@qq.com 标签: [MarkDown,Github,图床,S ...

  5. Python实用笔记——错误处理

    让我们用一个例子来看看try的机制: try: print('try...') r = 10 / 0 print('result:', r) except ZeroDivisionError as e ...

  6. express高效入门教程（1）

    1.hello world 1.1.安装express // 1.进入到自己的项目目录, 我这里是express-demo cd express-demo // 2.初始化项目,生成package.j ...

  7. 【python爬虫实战】使用Selenium webdriver采集山东招考数据

    目录 1.目标 2.Selenium webdriver说明 2.1 为什么使用webdriver 2.2 webdriver支持浏览器 2.3 配置与使用说明 3.采集 3.1 分析网站 3.2 遍 ...

  8. .NET 开源项目 StreamJsonRpc 介绍

    StreamJsonRpc 是一个实现了 JSON-RPC 通信协议的开源 .NET 库,在介绍 StreamJsonRpc 之前,我们先来了解一下 JSON-RPC. JSON-RPC 介绍 JSO ...

  9. 使用 Docker 开发 - 使用多阶段构建镜像

    多阶段构建是一个新特性,需要 Docker 17.05 或更高版本的守护进程和客户端.对于那些努力优化 Dockerfiles 并使其易于阅读和维护的人来说,多阶段构建非常有用. 在多阶段构建之前 构 ...

  10. iOS刨根问底-深入理解GCD

    概述 做过iOS开发的同学相信对于GCD(Grand Central Dispatch)并不陌生,因为在平时多线程开发过程中GCD应该是使用最多的技术甚至它要比它的上层封装NSOperation还要常 ...