本文介绍如何利用现代 CSS :has() 伪类配合 :not()，准确选取不含任何子元素（如 、 等）而仅包含文本节点的 标签，适用于 HTML 结构清洗与样式隔离场景。

本文介绍如何利用现代 css `:has()` 伪类配合 `:not()`，准确选取不含任何子元素（如 `postcss 插件 或 javascript 回退方案；

:not(:has(*)) 不会匹配空

（因其无文本节点），若需包含空段落，应改用 p:empty, p:not(:has(*)):not(:empty)；

注意区分 :only-child 或 :first-child 等位置伪类——它们无法判断内容结构，仅依赖 DOM 层级关系，不满足本例语义需求。

? 进阶提示：
若需进一步排除含空白字符（如换行、缩进）但无实际文本的

，CSS 本身无法直接判断文本内容是否“有效”，此时建议结合 JavaScript 进行精细化过滤：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

document.querySelectorAll('p').filter(p => 
  p.children.length === 0 && p.textContent.trim() !== ''
);

综上，p:not(:has(*)) 是当前最简洁、语义最准确的纯 CSS 解法，兼顾可读性与功能性，是现代前端处理“纯文本容器”选择的理想工具。

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