: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. 机器学习——打开集成方法的大门，手把手带你实现AdaBoost模型

    本文始发于个人公众号:TechFlow,原创不易,求个关注 今天是机器学习专题的第25篇文章,我们一起来聊聊AdaBoost. 我们目前为止已经学过了好几个模型,光决策树的生成算法就有三种.但是我们每 ...

  2. [转载] WLAN：BSS,ESS，SSID

    转载地址:http://blog.sina.com.cn/s/blog_71c6e0ea0100l686.html (2010-05-24 15:20:47) SSID(Service Set Ide ...

  3. gerapy 爬虫web调度可视化工具（基于scrapyd）

    web 基于scrapyd 提供主机管理功能 基于scrapyd管理已安装服务的主机. 进入具体主机管理页面,会自动加载所有已知爬虫任务: 可直接可以调度.运行.查看日志. 提供项目管理功能 将已知项 ...

  4. SSH网上商城三

    现在我们要实现下面的需求: 当用户点击左侧二级菜单选项的时候,在右侧要显示对应的该二级菜单项下面存在哪些商品,例如点击潮流女装,要在右侧分页显示该潮流女装下对应哪些商品 1.要分页显示 首先要获得该二 ...

  5. java8 Optional 类

    package jdk180reduce; import java.util.ArrayList; import java.util.HashMap; import java.util.List; i ...

  6. 入门大数据---Hbase容灾与备份

    一.前言 本文主要介绍 Hbase 常用的三种简单的容灾备份方案,即CopyTable.Export/Import.Snapshot.分别介绍如下: 二.CopyTable 2.1 简介 CopyTa ...

  7. 写出Python中列表、元祖、字典、字符串的至少5种以上的方法

    1.列表 常用方法 作用 参数 append(data) 在尾部添加数据 data-加入到列表中的数据 insert(idx,data) 在指定位置添加数据 idx-索引    data-数据 ext ...

  8. css3实现炫酷的文字效果_空心/立体/发光/彩色/浮雕/纹理等文字特效

    这篇文章主要整理一些css3实现的一些文字特效,分享给大家, 相信您看完会有不少的收货哦! 一.css3 空心文字 <style> .hollow{ -webkit-text-stroke ...

  9. Tensorflow教程（3）什么是张量？什么是数据流图？

    Tensorflow = Tensor(张量) + flow(数据流图) 1.张量 张量可不是“麻辣烫”!张量是一个很抽象的概念,直观的来说,张量在tensorflow中就像一个杯子,起到保存数据的作 ...

  10. C#利用反射实现简单记事本功能插件

    效果图: 源码下载:https://github.com/doyoulaikeme/DotNetSample