html 的empty属性,:empty | CSS属性参考

CSS :empty伪类选择器用于匹配页面中的空元素。

:empty伪类代表没有子元素的元素。这里说的子元素，只计算元素结点及文本(包括空格)，注释、运行指令不考虑在内。例如下面的div元素是一个空元素，它会被:empty伪类选择器匹配：

而下面的

元素则不是空元素。

文本内容

段落内容

文本内容

:empty伪类可以用来隐藏无用的空元素。

当一个元素中包含有一个空格的时候，该元素不会被认为是空元素，例如：

如果一个元素中包含一个空的子元素，该元素也不会被认为是空元素。例如：

如果一个元素只有开标签，而没有闭合标签，则该元素不会被认为是空元素(因为空格被认为是内容元素)。

但是，如果开标签后面直接跟着另外一个标签的话，则开标签会被认为是空元素，例如：

文字内容...

如果一个开标签后面直接跟着另外一个开标签，则第一个开标签会被认为是空元素，而第二个开标签则不是。例如：

所有的自闭合元素，例如：

、
和等，都会被认为是空元素，它们都会被:empty伪类选择器匹配。

示例代码

/* 隐藏页面中所有的空元素 */

*:empty {

display: none;

}

/* 隐藏页面中所有的空段落 */

p:empty {

display: none;

}

/* 隐藏页面中所有的空菜单项 */

nav a:empty {

display: none;

}

/* 选择表格中空的单元格，并为它们设置背景颜色 */

td:empty {

background-color: #eee;

}

浏览器支持

所有的现代浏览器都支持:empty伪类，包括：Chrome, Firefox, Safari, Opera9.5+, Internet Explorer 9+ 以及 Android 和 iOS。

html 的empty属性,:empty | CSS属性参考相关推荐

前端：JS/28/CSS DOM动态样式（style对象，style 对象属性与CSS属性的转换），Event DOM，事件对象简介（DOM和IE中的Event对象），实例：点出满天小星星
CSS DOM动态样式使用JS操作CSS中的各个属性: JS只能操作或修改行内样式,如:imgObjstyle.border = "1px solid red"; 对于类样式,通 ...
html scale属性,scale() | CSS属性参考
CSS scale()函数用于在二维空间中对一个元素进行缩放. scale()函数的语法如下: transform: scale( [, ]?); scale()函数用于缩放一个元素.它接收一个或两个 ...
html3d空间属性,rotate3d() | CSS属性参考
CSS rotate3d()函数用于在3D空间中对元素进行旋转. rotate3d()函数的语法如下: transform: rotate3d( , , , ); 元素旋转的角度由rotate3d() ...
html hover的属性,:hover | CSS属性参考
CSS :hover伪类用于匹配用户使用鼠标指针滑过的元素. 绝大部分的移动触摸设备都不支持鼠标的滑过(hover)交互,因此在移动设备中使用:hover伪类是没有效果的. :hover伪类是当一个元 ...
html属性选择器怎么写,html – 具有“type”属性与make-up属性的CSS属性选择器和区分大小写...
我正在尝试根据其type属性设置OL样式.所有UL和OL的列表样式属性之前已经被另一个我无法修改的CSS样式表消灭了,我需要重新设置列表样式,将类型考虑在内,即如果OL应该使用Roman人物或字母数字 ...
javascript操作html元素CSS属性
以下先记录一下JS控制CSS所使用的方法. 1.使用javascript更改某个css class的属性... <style type="text/css"> .or ...
【重识 HTML + CSS】基本 CSS 属性
[重识 HTML + CSS] CSS 简介内联样式.文档样式表.外部样式表 @charset.@import 注释 HTML 和 CSS 的编写准则设置网页的图标常用 CSS 属性初识 CS ...
Jquery删除css属性
有时我们不需要某个css属性时,想删除它,但有没有removeCss方法,怎么办呢?可以使用如下方法解决 $('选择器').css('css属性',''); 即将css属性值赋值为空,页面中就不会 ...
css 窗口模式,如何：使用“CSS 属性”窗口
如何:使用"CSS 属性"窗口 11/15/2012 本文内容您可以使用**"CSS 属性"**窗口来查看并修改级联样式表 (CSS) 样式属性. 对于 We ...
CSS 3 CSS 属性 3.4 字体
CSS 文章目录 CSS 3 CSS 属性 3.4 字体 3.4.1 字体选择很重要 3.4.2 通用字体族 3.4.3 Serif 和 Sans-serif 字体之间的区别 3.4.4 一些字体的例 ...

html 的empty属性,:empty | CSS属性参考

html 的empty属性,:empty | CSS属性参考相关推荐

最新文章

热门文章