在网页开发里，按钮常常不是单纯的一段文字，而是里面放了好几个元素，比如图标、主标题、角标数字。用CSS去改这类按钮的文本，既要看结构怎么写，也要清楚CSS本身能做什么、不能做什么。
一、常见的多元素按钮结构
先来看一个典型的按钮写法，里面用 span 分开了图标和文字：
<button class="btn"> <span class="icon">★</span> <span class="text">收藏</span> <span class="count">12</span> </button>
这种结构下，文本被拆到了不同子元素中，CSS 处理起来和单个文本节点不一样。
二、用CSS修改文本样式的技巧
1. 直接控制文字样式
如果只想改颜色、字号，直接针对类写规则即可：
.btn .text {
color: #e91e63;
font-size: 14px;
font-weight: bold;
}
2. 用伪元素替换文本
当按钮文本放在一个单独的元素里，且不需要保留原文本时，可以用 content 替换：
.btn .text {
font-size: 0; /* 隐藏原文字 */
}
.btn .text::after {
content: "已收藏";
font-size: 14px;
}
3. 利用属性选择器配合 data 属性
在标签上写 data 属性，用 attr() 显示内容，方便切换状态：
<button class="btn" data-label="收藏"> <span class="text"></span> </button>
.btn .text::before {
content: attr(data-label);
}
三、CSS处理多元素按钮文本的局限性
1. 无法修改其他子元素里的动态文本
像上面例子里的 count，如果是 JS 实时更新的数字，CSS 没法读取并改写其内部文本，只能改样式。
2. 伪元素替换破坏可访问性
用 content 生成的内容，部分屏幕阅读器不会读，原文本隐藏后反而让视障用户不清楚按钮含义。
3. 结构耦合导致样式脆弱
一旦 HTML 结构变动，比如把 text 的 span 去掉，纯 CSS 的文本替换就会失效。下表做了简单对比：
| 方式 | 能否改内容 | 维护成本 |
|---|---|---|
| 直接样式 | 否 | 低 |
| 伪元素替换 | 能 | 中 |
| JS改文本 | 能 | 高 |
四、实践建议
如果只调外观，用普通 CSS 规则最稳妥；要换词且结构固定，可用伪元素；涉及动态数据或重视无障碍，交给 JavaScript 更合适。写样式时尽量用 class 而不是依赖标签嵌套层级，能减少后期改动风险。