[css3] :empty 选择器

最新推荐文章于 2025-06-29 09:09:00 发布
最新推荐文章于 2025-06-29 09:09:00 发布
阅读量458 收藏 1
点赞数
分类专栏： css 文章标签： css  选择器
本文详细介绍了CSS3中的:empty选择器，该选择器用于匹配没有子元素的元素，包括文本节点。示例展示了如何使用:empty选择器来指定空元素的样式，如背景色。所有主流浏览器除IE8及更低版本外均支持此选择器。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

:empty 选择器

原文链接： CSS3 :empty 选择器

实例

指定空的 p 元素的背景色：

p:empty {
	background: #ff0000;
}

在 jsrun 中打开示例

浏览器支持

IEFirefoxChromeSafariOpera
支持支持支持支持支持

所有主流浏览器均支持 :empty 选择器，除了 IE8 及更早的版本。

定义和用法

:empty 选择器匹配没有子元素(包括文本节点)的每个元素。

CSS选择器：基本选择器、复合选择器、伪类选择器、伪元素选择器
pan_junbiao的博客
07-11 3200
CSS选择器包含：基本选择器、复合选择器、伪类选择器、伪元素选择器。基本选择器包括：元素选择器、类选择器、ID 选择器、属性选择器。最常见的 CSS 选择器是元素选择器。换句话说，HTML文档的元素就是最基本的选择器。例如设置 HTML 样式，选择器通常是某个 HTML 元素，如 p、h1、a 等，甚至可以是 HTML 本身。在 HTML 中，各种各样的属性可以给元素添加很多附件信息，并且可以通过 JavaScript 控制这些附加属性的内如何状态。在使用 CSS 的时候，也可以使用这些附加属性来指定元素。
CSS3-:empty、:not()选择器的用法
weixin_44486539的博客
01-25 1367
`:empty` 用于选择指定的没有子元素（包括文本节点）的元素。 `:not(selector)` 选择每个元素不是指定的元素或选择器部分；就是取非。
CSS :empty 选择器
lengqingIT的博客
03-30 673
HTML 用法 <body> <h1>:empty选择器选择每个没有任何子级的元素（包括文本节点）</h1> <p></p> <p>实例：指定空的p元素的背景色</p> <p>半暖茶港</p> </body> CSS 用法 p:empty { width:200px; ...
:empty选择器
zhangyongxi123的博客
09-11 160
empty选择器选择每个没有任何子级的元素（包括文本节点）。/* 隐藏页面中所有的空段落 */table 空值元素替换成 ‘–’
CSS3 选择器详解：:empty 伪类选择符（来自 doyoe/css-handbook）
最新发布
gitblog_00925的博客
06-29 377
CSS3 选择器详解：:empty 伪类选择符（来自 doyoe/css-handbook） 什么是 :empty 伪类选择器？ :empty 是 CSS3 中引入的一个结构性伪类选择器，它允许开发者匹配没有任何子元素（包括文本节点）的 HTML 元素。这个选择器在网页布局和样式设计中非常实用，特别是当我们需要为空的容器元素添加特殊样式时。 语法解析 :empty 选择器的语法非常简单： E:em...
CSS3新增选择器 第一部分（:root 选择器 :empty 选择器 :not 选择器 ）
seimeii的博客
01-29 769
CSS3新增选择器 第一部分（:root 选择器 :empty 选择器 :not 选择器 ）
jquery 的:empty选择器
行天之路
10-28 1738
在jquery中，empty 选择器用来选择没有任何子元素(包括内部文本)的元素。   例子： div class="div-class1">    This is div-class1 /div>   div class="div-class2" >  $(“:empty”)—div-class2 匹配，而div-class1 不匹配。
:empty css 可以用在哪些标签,CSS3 :empty 选择器
weixin_29905347的博客
08-04 291
这可是个好东西，我也是这个星期才发现的，下面我们来说具体功能。p:empty{width:100px;height:20px;background:#ff0000;}A paragraph.Another paragraph.知道这代码运行后是怎样的吗？我们来看效果。p标签里有内容的，就没有运行下面的代码，但是没有内容的p标签，渲染成了红色。p:empty{width:100px;height:2...
jQuery中:empty选择器用法实例
12-12
本文实例讲述了jQuery中empty选择器用法。分享给大家供大家参考。具体分析如下： 此选择器匹配所有不包含子元素或者文本的空元素。 注意:空格也属于选择器包含的元素。 语法结构: 代码如下:$(“:empty”) 此选择器...
css的:empty
02-14
### 使用 `:empty` 伪类选择器 `:empty` 是一种用于匹配完全不含任何子节点（包括文本节点）的元素的选择器[^1]。 当一个 HTML 元素内部没有任何内容时，该元素被认为是空的。例如： ```html <div></div> ``` ...
CSS3伪类选择器；例如：E:root、E:not等等
03-25
CSS3伪类选择器 E:root 根选择器，它的意思是匹配元素E所在文档的根元素，在HTML文档中，根元素始终是 E:not 否定选择器，它和JQuery中的:not选择器一模一样，可以选择除某个元素以外的元素， E:first-child 第...
CSS3中的常用选择器使用示例整理
09-24
`:root`、`:not`、`:empty`和`:target`只是其中的一部分，还有更多如伪类、属性选择器、组合选择器等，它们共同构建了强大的CSS3选择器体系，使得开发者能更精细地控制网页的样式和布局。通过熟练掌握这些选择器，你...
css3的empty 选择器的小用法
weixin_55010771的博客
02-27 575
用法： :empty选择器选择每个没有任何子级的元素（包括文本节点）。 empty选择器结合slot的用法 在开发时，经常遇到这样的标题，使用次数比较多，但是每次不一定都是一样得标题，所以使用empty选择器，封装了一个标题组件 html部分 在.slot里预留插槽 <view class="title">{{title}}</view> <view class="right" wx:if="{{showRight}}" bindtap="handleRightClick"&
html5中的empty是啥,什么是empty选择器？empty选择器详解
weixin_29416459的博客
06-25 1111
本篇文章给大家带来的内容是关于什么是empty选择器？empty选择器详解，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。在CSS3中，:empty选择器用于选择一个不包含任何子元素或内容的元素。也就是选择一个内容为空白的元素。举例：CSS3 :empty选择器table,tr,td{border:1px solid silver;}td{width:60px;height:60p...
css 超实用的:empty —— 隐藏空元素、缺失字段智能提示
朝阳39的博客
12-22 5729
应用1：隐藏空元素 有时空元素会影响页面布局，通过:empty可以很方便地将它们隐藏。 <template> <ol> <li>一</li> <li></li> <li>三</li> </ol> </template> <style scoped> li:empty { display: none; } </style> .
css3新增选择器（root选择器、:empty选择器、:not选择器、:checked选择器）
m0_71814235的博客
07-19 1030
css3新增选择器（root选择器、:empty选择器、:not选择器、:checked选择器）
:empty css 可以用在哪些标签,在CSS3中empty选择器有什么用
weixin_39639514的博客
08-04 338
在CSS3中empty选择器有什么用发布时间：2020-12-07 14:39:18来源：亿速云阅读：95作者：小新这篇文章主要介绍了在CSS3中empty选择器有什么用，具有一定借鉴价值，需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。在CSS3中，:empty选择器用于选择一个不包含任何子元素或内容的元素。也就是选择一个内容为空白的元素。举例：CSS3 ...
CSS伪类:empty让我眼前一亮
flying meng的菜鸟居
11-02 8273
最近看过我文章的都知道：我最近在写一个微信小程序的项目，在其中遇到了很多有趣的事和一些“奇思妙想”。本文的背景就是今天早上我看着wxml文件中一堆wx:if/else和hidden突然很烦躁，先不说wx:if的性能问题，就是标签上也是冗杂的。 接着上一篇文章【微信小程序自定义组件库yPicker组件分析及省市区三级联动实现】，在其中我分析了这么一个例子 —— 省市区三级联动的自定义实现，在其中有详细代码这里就不多说，说说如何调用： 我当时是这么想的：一方面出于“不在JavaScript里写太多东西”的考虑
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值