css以两种不同颜色显示文字

<p class=“text”>你好，世界！再见，世界！</p>
.text {
  color: black; /* 默认颜色 */
}


.text:nth-of-type(1) {
  color: red; /* 第一个元素的颜色 */
}

.text:nth-of-type(2) {
  color: blue; /* 第二个元素的颜色 /
}
如果你想要的是对单个元素的文本内容的不同部分应用不同的颜色，可以使用CSS的伪元素::before或::after来添加额外的元素，并为它们设置颜色。
<p class=“text”>你好，世界！再见，世界！</p>
.text {
  position: relative;
  color: black; / 默认颜色 */
}

.text::before {
  content: ‘你好，’;
  color: red; /* 第一部分颜色 */
  position: absolute;
}

.text::after {
  content: ‘！再见，世界！’;
  color: blue; /* 第二部分颜色 /
  position: absolute;
  left: 100px; / 根据内容长度调整 */
}
这个例子中，::before伪元素将会显示红色的文本，而::after伪元素将会显示蓝色的文本。注意，使用伪元素时可能需要通过position属性来调整文本位置。