要实现一行文字中部分文字显示为另一种颜色，可以使用CSS的伪元素技巧。以下是具体方法及示例：
一、使用 `::before` 伪元素覆盖部分文字
HTML结构 使用一个包裹文字的容器元素（如 ``），并设置相对定位：
```html
Hello World!
```
CSS样式
- 为容器设置 `position: relative；` 以便伪元素绝对定位；
- 使用 `::before` 伪元素覆盖部分文字，并设置 `color` 属性为目标颜色：
```css
.two-color-text {
position: relative;
font-size: 48px;
color: 000; /* 默认文字颜色 */
}
.two-color-text::before {
content: attr(data-text); /* 使用数据属性传递原始文本 */
position: absolute;
left: 0;
top: 0;
color: ff0000; /* 覆盖文字颜色（如红色） */
white-space: nowrap; /* 防止文字换行 */
}
```
注意事项
- 需通过 `data-text` 属性将原始文本传递给伪元素，避免内容被覆盖：
```html
默认文字
```
- 此方法适用于单行文字，且需要提前知道要覆盖的文字范围。
二、使用 CSS `background-clip` 属性
HTML结构
与上述方法相同：
```html
Hello World!
```
CSS样式
使用 `background-clip: text；` 将文字作为背景，并通过 `background-image` 展示部分文字：
```css
.background-clip-text {
font-size: 48px;
color: transparent; /* 文字颜色设为透明 */
background-image: linear-gradient(to right, ff0000, 00ff00); /* 定义渐变颜色 */
background-clip: text;
-webkit-background-clip: text; /* 兼容旧浏览器 */
white-space: nowrap;
}
```
注意事项
- 此方法会改变整个文字的背景色，且颜色为渐变效果，需调整 `linear-gradient` 参数实现部分文字变色。
三、其他方法（不推荐）
HTML实体编码： 通过 `&xx00ff00；` 等实体编码实现部分文字变色，但无法动态控制； 图片或SVG
总结
推荐使用 CSS伪元素方法，既灵活又兼容性较好。若需动态控制变色范围，可结合JavaScript实现更复杂效果。
