: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. Beta冲刺--项目测试

    这个作业属于哪个课程 软件工程 (福州大学至诚学院 - 计算机工程系) 这个作业要求在哪里 Beta 冲刺 这个作业的目标 Beta冲刺--项目测试 作业正文 如下 其他参考文献 ... Beta冲刺 ...

  2. Spring事务深入剖析--spring事务失效的原因

    之前我们讲的分布式事务的调用都是在一个service中的事务方法,去调用另外一个service中的业务方法, 如果在一个sevice中存在两个分布式事务方法,在一个seivice中两个事务方法相互嵌套 ...

  3. 最新的一波Vue实战技巧，不用则已，一用惊人

    在Vue中,不同的选项有不同的合并策略,比如 data,props,methods是同名属性覆盖合并,其他直接合并,而生命周期钩子函数则是将同名的函数放到一个数组中,在调用的时候依次调用 在Vue中, ...

  4. node+ajax实战案例（5)

    6.添加客户 6.1.点击添加按钮,弹出表单框 // 添加用户 显示对话框 var addBtn = document.getElementById('add-btn'); var addUser = ...

  5. dup与dup2函数

    依赖的头文件 #include <unistd.h> 函数定义 int dup(int oldfd); int dup2(int oldfd, int newfd); 函数作用 dup和d ...

  6. div嵌套引起的内层margin-top对外层div起作用

    嵌套div中margin-top转移问题的解决办法在这两个浏览器中,有两个嵌套关系的div,如果外层div的父元素padding值为0,那么内层div的margin-top或者margin-botto ...

  7. ArcServer服务通过python备份，到另一台机器还原服务

    通过python可以快速把服务器上所有的服务都备份下来(只能备份服务,无法备份缓存文件),然后可以把备份文件考到需要新装的服务器上进行还原.还原时所有的Server缓存.输出等文件夹地址都是按源备份地 ...

  8. spring boot 整合Thymeleaf模板

    SpringBoot 是为了简化 Spring 应用的创建.运行.调试.部署等一系列问题而诞生的产物,自动装配的特性让我们可以更好的关注业务本身而不是外部的XML配置,我们只需遵循规范,引入相关的依赖 ...

  9. 【Oracle】表碎片重用规则

    看完该篇文章你可以了解如下问题:表碎片是如何产生的,这些碎片能否重用? 数据库版本如下: SYS@zkm> select banner from v$version where rownum=1 ...

  10. Mariadb之半同步复制集群配置

    首先我们来了解下在mariadb/mysql数据库主从复制集群中什么是同步,什么是异步,什么是半同步:所谓同步就是指主节点发生写操作事件,它不会立刻返回,而是等到从节点接收到主节点发送过来的写操作事件 ...