当无法修改 html 源码时，可通过 `::before` 或 `::after` 伪元素配合精准 css 选择器（如 `:first-child`、`:nth-of-type()` 等）为目标元素添加前置或后置文本。关键在于修正选择器语法（如 `:first-child` 不是 `:firstchild`），并确保匹配唯一性。

在实际开发中，常遇到「仅能通过 CSS 注入文本」的限制场景——例如 CMS 页面、第三方嵌入模块或受限的前端环境。此时，CSS 伪元素 ::before 和 ::after 是最可靠的解决方案，但其效果高度依赖选择器的准确性。

你原写的规则：

.content div:firstchild:after { content: 'Test'; }

存在两个关键问题：

1. 语法错误：:firstchild 并非合法 CSS 伪类，正确写法是 :first-child（注意连字符 -）；
2. 层级与语义误判：.content div:first-child 表示「.content 下直接子级中第一个
   元素」，若目标

   并非 .content 的首个子元素（例如前面有

   、

   或注释节点），该选择器将不生效。

   ✅ 正确写法如下：

   

   前端开发

   ys-agent 前端（frontend/）功能迭代的工程规范守门 skill。当任何 agent 接到 ys-agent 前端相关任务时——新增页面、新增组件、加 API、加 Pinia store、改路由、写 mock、调整布局、修改样式、对接后端接口、迁移 demo 代码、做主题、加权限、写公共组件、做数据可视化、做表单、做弹窗、做表格、做搜索过滤、调 Element Plus 用法、做响应式、做性能优化，或仅仅是在 frontend/ 目录下编辑任何 .vue / .ts / .scss / .c

   下载

   立即学习“前端免费学习笔记（深入）”；

   .content div:first-child::after {
     content: 'Test';
     /* 推荐添加 display: inline-block 或 white-space: pre 确保文本可见 */
   }

   ⚠️ 注意事项：

   • 使用双冒号 ::after（推荐现代写法，兼容性与单冒号 :after 相同）；
   • content 属性必须设置，否则伪元素不会渲染；
   • 若目标元素为 display: inline（如 或 ），建议显式设置 display: inline-block 或 white-space: pre 避免换行/折叠问题；
   • 当需定位更精确的元素（如第 3 个
     、某个 标签后），可改用：

     .content b:nth-of-type(1)::after { content: ' (Primary)'; } /* 第一个 <b> 后追加 */
     .content div:nth-child(3)::before { content: '→ '; }         /* 第三个子元素（且为 div）前插入 */

     ? 小技巧：若页面结构复杂、父子关系不明确，可在浏览器开发者工具中右键目标元素 → “Copy” → “Copy selector”，获取浏览器生成的高精度路径选择器（如 .content > table > tbody > tr:first-child td:last-child），再精简优化，大幅提升定位成功率。

     总结：CSS 添加文本的核心 = 合法伪元素 + 精准选择器 + 必填 content 值。修正 :first-child 拼写只是起点，结合 DOM 结构灵活选用 :nth-child()、:nth-of-type() 或属性选择器（如 [class*="price"]），才能稳定、可维护地实现需求。