Question

假设我有以下HTML代码：

<p>Hello world</p>

是否有一种方法，仅使用CSS而不更改实际的HTML，即可更改w文本中Hello world的样式？（假设将其涂成绿色）

Answer 1

不可能（除非是第一个字母），解决方法是在span周围使用w，然后设置样式

p span {
  color: lightgreen
}

div::first-letter {
  color: red
}

<p>Hello <span>w</span>orld</p>

<div>Hello world</div>

Answer 2

如果已知font-size和font-family，则可以使用渐变来完成。只需调整值，以使仅w带有颜色

p {
  font-size: 30px;
  background: 
     linear-gradient(to right, black 50%, green 50%,green 67%,#000 67%);
  display: inline-block;
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

<p>Hello world</p>

仅更改p中一个字母的样式

2 个答案: