结构性伪类选择器—empty

最新推荐文章于 2021-06-04 14:10:48 发布
最新推荐文章于 2021-06-04 14:10:48 发布
阅读量397 收藏
点赞数

:empty选择器表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。

示例显示：

比如说，你的文档中有三个段落p元素，你想把没有任何内容的P元素隐藏起来。我们就可以使用“:empty”选择器来控制。

HTML代码：

<p>我是一个段落</p>
<p> </p>
<p></p>​

CSS代码：

p{
 background: orange;
 min-height: 30px;
}
p:empty {
  display: none;
}​

演示结果：

任务

在CSS编辑器的第五行输入正确代码，给空的div元素添加1px的绿色边框。

<!DOCTYPE www.dztcsd.comhtml>
<html>
<head> 
<meta charset="utf-8">
<title>结构性伪类选择器—empty</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head> 
<body>
    <div>我这里有内容</div>
    <div></div>
    <div></div><!-- 我这里任何内容都没有 -->
</body>
</html>

大志天成119
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JQuery选择器、过滤器大整理
10-24
5. **伪类选择器**：例如 `:first`, `:last`, `:even`, `:odd`, `:checked`, `:selected` 等，用于选取集合中的第一个、最后一个、偶数索引或被选中的元素。 6. **表单选择器**：`:input`, `:text`, `:password`, `...
jquery选择器之内容过滤选择器详解
10-26
在jQuery中，选择器是用于选取页面上特定元素的工具...通过巧妙地组合使用这些选择器，可以实现复杂而精确的DOM操作，从而提高网页的交互性和动态性。在实际开发中，熟练掌握这些选择器能显著提升代码的效率和可读性。
CSS3---结构性伪类选择器—empty
diyinjiao1404的博客
05-04 166
结构性伪类选择器—empty :empty选择器表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。 示例显示： 比如说，你的文档中有三个段落p元素，你想把没有任何内容的P元素隐藏起来。我们就可以使用“:empty”选择器来控制。 HTML代码： <p>我是一个段落</p> <p> </p&...
CSS3 结构性伪类选择器—empty
lorry的博客
03-17 211
:empty选择器表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。 示例显示： 比如说，你的文档中有三个段落p元素，你想把没有任何内容的P元素隐藏起来。我们就可以使用“:empty”选择器来控制。 HTML代码： 我是一个段落 ​ CSS代码： p{ background: orange; min-height: 30px; } p:empty ...
CSS3 empty伪类(:empty)
houyanhua1的专栏
03-21 2912
demo.html：&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style&gt; div { width: 500px; h
CSS：好玩的‘伪类’系列之——(:empty)
gavincz的博客
04-29 982
:empty 定义：只针对没有子元素的元素进行样式修改。(子元素可以是元素节点或文本、空格；注释或处理指令都不会产生影响)。 触发条件：当当前元素不存在任何子元素（DOM节点）及空格时，可以使用:empty修改其自身样式。 兼容：IE8及8以下不支持Opera9.5以下不支持 举个栗子 html代码： <div></div><!-- 我没有子节点（...
CSS伪类:empty让我眼前一亮
flying meng的菜鸟居
11-02 8156
最近看过我文章的都知道：我最近在写一个微信小程序的项目，在其中遇到了很多有趣的事和一些“奇思妙想”。本文的背景就是今天早上我看着wxml文件中一堆wx:if/else和hidden突然很烦躁，先不说wx:if的性能问题，就是标签上也是冗杂的。 接着上一篇文章【微信小程序自定义组件库yPicker组件分析及省市区三级联动实现】，在其中我分析了这么一个例子 —— 省市区三级联动的自定义实现，在其中有详细代码这里就不多说，说说如何调用： 我当时是这么想的：一方面出于“不在JavaScript里写太多东西”的考虑
HTML5&CSS3网页制作：结构化伪类选择器.pptx
05-31
通过熟练掌握这些结构化伪类选择器，开发者可以创建更加动态、响应式的网页，同时减少不必要的JavaScript代码，提升页面性能。在实际应用中，结合其他CSS3特性如动画和过渡，可以实现更加丰富和精细的界面设计。
使用HTML开发商业网站-结构化伪类选择器课件.pptx
07-10
通过以上介绍，我们可以看到结构化伪类选择器为网页设计提供了极大的灵活性和控制力。合理运用这些选择器，不仅能够提高网页的美观性，还能有效提升用户体验。希望本文的内容对你在使用HTML开发商业网站时有所帮助。
让IE可以变相支持CSS3选择器
12-10
1. **CSS3选择器**: CSS3引入了一系列高级选择器，如`:nth-child()`、`:first-of-type`、`:last-of-type`等，这些选择器可以更精确地定位和选择元素，从而提高代码的可读性和维护性。但在旧版IE浏览器中，这些功能...
CSS3中结构伪类选择器——root、not、empty、target选择器
weixin_34121282的博客
09-03 199
1.root选择器 将样式绑定到页面的根元素中。根元素是指位于文档树中最顶层结构的元素，在HTML页面中就是指包含整个页面的<html>部分。 <style type="text/css"> :root{ background:yellow; } body{ background:green; } </style> 注意：不使用root选择器...
css3伪类:empty
Focus-Fe
09-28 239
介绍一下css3伪类之:empty       ------------------------ 匹配没有子元素和内容的元素。      注释：连空格也不能有！     #test:empty{width:100px;}      应用场景：         可以给一些空节点隐藏用！ ...
css3之路- 结构性伪类
天天的博客
02-07 247
empty    
CSS3结构性伪类
Missingmusic的博客
08-09 262
html> html> head lang="en"> meta charset="UTF-8"> title>title> style type="text/css"> div { border: 1px solid red; height: 30px; } /*:root选择
结构伪类_结构化伪类
culi3118的博客
09-01 848
结构伪类The following is an extract from our book, HTML5 & CSS3 for the Real World, 2nd Edition, written by Alexis Goldstein, Louis Lazaris, and Estelle Weyl. Copies are sold in stores worldwide, or y...
css复习——结构性伪类
wangyuanti的博客
10-14 178
0803结构性伪类<style> p:nth-child(3){ background-color: #000000; } </style>p:nth-child(n) 表示p元素的父级中的第n个子元素 并且这个子元素必须是p，否则没有反应。<style> p:nth-last-child(2){ ba
csss3----结构性伪类选择器
sjpgyy的博客
06-06 552
二 csss3结构性伪类选择器 伪类选择器以及伪元素 1.类选择器：在css中可以使用类选择器把相同的元素定义成不同的样式。 比如： p.left{text-align:left} p.right{text-align:right} 2.伪类选择器 类选择器和伪类选择器的区别在于，类选择器可以随意起名，而伪类选择器是css中已经定义好的选择器，不可以随意起名。 最常见的伪类选择器 a:link{color:#ff6600}/未被访问的链接/ a:visited{color:#87b291}/已被访问
结构性伪类选择器—target
09-12 850
:target选择器称为目标选择器，用来匹配文档(页面)的url的某个标志符的目标元素。我们先来上个例子，然后再做分析。 示例展示 点击链接显示隐藏的段落。 HTML代码： #brand">Brand id="brand"> content for Brand CSS代码： .menuSection{ display: none; } :target{/*
html 的empty属性,:empty | CSS属性参考
weixin_42498641的博客
06-04 1563
CSS :empty伪类选择器用于匹配页面中的空元素。:empty伪类代表没有子元素的元素。这里说的子元素，只计算元素结点及文本(包括空格)，注释、运行指令不考虑在内。例如下面的div元素是一个空元素，它会被:empty伪类选择器匹配：而下面的元素则不是空元素。文本内容段落内容文本内容:empty伪类可以用来隐藏无用的空元素。当一个元素中包含有一个空格的时候，该元素不会被认为是空元素，例如：如果一...
2016年全面详解：CSS3选择器与结构性伪类实战教程
2. **结构性伪类选择器**： - `:nth-child(n)`：根据兄弟节点位置选择，如`p:nth-child(odd)`匹配奇数行。 - `:nth-child(even)`、`:nth-child(2n)`等类似用法。 - `:nth-last-child(n)`：从后向前计数的子节点。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值