使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

:empty只匹配dom子节点数为0的元素，因换行/空格会被解析为#text节点，故含空白字符的元素不匹配；验证需用devtools检查子节点、执行childnodes.length===0；自闭合标签、含注释或框架插入空白的元素均不适用；替代方案包括textcontent.trim()、:not(:has(*))等。

为什么:empty匹配不到换行或空格填充的元素

因为:empty只认 DOM 子节点数量为 0 的元素，而 HTML 解析器会把换行符、缩进空格、制表符全部转成 #text 节点。哪怕你写的是 <div></div>，只要源码里有回车或空格（比如模板渲染后带缩进），实际 DOM 就是 <div>\n </div>——含一个文本节点，:empty直接跳过。

:empty不生效时怎么快速验证是否真“空”

别靠眼睛看 HTML 源码，用浏览器 DevTools 实锤：

• 在 Elements 面板中选中目标元素，右侧 Styles 标签页里看 div:empty 规则是否高亮（没高亮=没命中）
• 右键 → “Edit as HTML”，检查内部是否**连回车都没有**（不是“没文字”，是“什么节点都没有”）
• 控制台执行 el.childNodes.length === 0，返回 true 才算过关
• 注意：<p></p> 在多数浏览器里默认生成一个空文本子节点，所以它永远不匹配 :empty

哪些元素根本不可能被:empty匹配

不是所有空标签都适用：

• <img>、<input>、<br> 等自闭合元素不是容器，没有子节点概念，:empty 不作用于它们
• <slot></slot> 默认 fallback 文本是子节点，即使没传内容也不空
• <div>{{ data }}</div>（Vue/React）中 data 为空时，框架可能插入空白文本节点
• <div><!-- debug --></div> 中注释是节点，不空

替代方案：比:empty更实用的判断方式

纯 CSS 处理“视觉空”不可靠，得结合 JS 或现代选择器：

• 用 el.textContent.trim() === '' 判断——它忽略所有空白字符，且不触发重排
• 动态场景下加 MutationObserver 监听内容变化，再清理或打标
• 兼容性够的话，用 div:not(:has(*))（忽略文本节点，只看是否有元素子节点）
• 服务端或构建阶段用 html-minifier 开启 collapseWhitespace，从源头减少空白节点

真正难的不是写对选择器，而是确认“空”的定义来自哪一层：DOM 结构？渲染视觉？还是业务语义？三者不一致时，:empty 就只是个严格但窄的工具，不是解法。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！