[分享]css一行颜色不同

在CSS中给一行字设置不同的颜色是一件很常见的事情，那么如何实现呢？

p {
  color: red; /* 设置默认颜色 */
}

/* 使用 ::first-line 伪元素选择第一行 */
p::first-line {
  color: blue; /* 设置第一行的颜色 */
} 

上面的例子中，我们先给p标签设置了默认颜色为红色，然后使用伪元素::first-line选择了第一行，将其颜色设置为蓝色。

除了使用伪元素::first-line，我们还可以使用伪类:hover实现鼠标移动到该行时变色：

p:hover {
  color: green; /* 设置鼠标移动到该行时的颜色 */
} 

这样当鼠标移动到该行时，该行的颜色会变为绿色。

还有一种情况是，我们想给一行中的某几个字设置不同的颜色怎么办呢？这时候我们可以使用标签，给需要设置颜色的文本加上该标签，并在CSS中设置颜色：

p span {
  color: yellow; /* 设置span标签文本的颜色 */
} 

这样我们就可以轻松地实现一行字中不同颜色的设置了。