在不同的网页环境中，实现`textarea`里的不同文本显示不同颜色可能是一个挑战，因为传统的`textarea`元素并不支持直接应用CSS样式到其中的不同部分（如不同的单词或句子）。不过，你可以使用替代方法，如`contenteditable`的`div`，它允许你应用更丰富的样式。
以下是一个使用`contenteditable="true"`的`div`来模拟`textarea`并应用不同颜色到不同文本的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Editable Div with Colors</title>
<style>
.editable-div {
border: 1px solid #ccc;
padding: 10px;
min-height: 100px;
resize: vertical;
outline: none; /* 移除焦点时的蓝色边框 */
}
.red {
color: red;
}
.blue {
color: blue;
}
/* 你可以继续添加更多的颜色类 */
</style>
</head>
<body>
<div class="editable-div" contenteditable="true">
这里是普通的文本。<span class="red">这是红色的文本。</span> <span class="blue">这是蓝色的文本。</span>
</div>
<script>
// 如果需要动态添加颜色，可以在JavaScript中操作
// 例如，使用innerHTML添加新的带颜色的文本
// 示例代码略，因为这是一个交互式操作，依赖于用户的具体需求
</script>
</body>
</html>
在这个例子中，`.editable-div`模拟了一个`textarea`，并且`contenteditable="true"`属性使其内容可编辑。通过在`div`内部使用``标签并指定不同的颜色类（如`.red`和`.blue`），我们可以为不同的文本片段设置不同的颜色。
请注意，这种方法的用户体验可能与传统的`textarea`略有不同，因为用户可能更习惯于`textarea`的交互方式。此外，由于它是可编辑的`div`，你还需要考虑处理内容验证、防止XSS攻击等安全问题。