css - 为word中的单个字母设置样式

Question

我目前正在尝试为“Siterip”这个词设置样式。我希望每个字母都有不同的颜色。如本页所示，我可以使用下面的 CSS 代码行设置第一个字母的样式

#namer:first-letter {
  color:#09C;
  font-size:1.1em;
  font-weight:bold;
}

由于单词中有八（8）个字母，我如何设置其余七个字母的样式？我确实尝试了下面的造型，但没有奏效。有没有办法单独设置字母的样式而不使用跨度包装每个字母。

   #namer:(1)-letter {
      color:#09C;
      font-size:1.1em;
      font-weight:bold;
    }

score 2 · Accepted Answer

请记住，CSS 是级联的。您可以将整个#namer 元素与第一个字母分开设置样式 - 更具体的样式将覆盖更通用的样式。

#namer:first-letter {
    color:#09C;
    font-size:1.1em;
    font-weight:bold;
}

#namer {
    color:red;
}

更新：

Lettering.js允许对单个字母进行样式设置。有关其他信息，请参阅下面的评论。上面的信息仅用于设置初始字符的样式，并且在对其进行编辑以使其更清晰之前回答了 OP 的原始问题。

score 0 · Accepted Answer

您应该能够使用选择器选择整个文本而无需索引

#namer:first-letter {
    color:#09C;
    font-size:1.1em;
    font-weight:bold;
}

#namer {
    color:red!important;
}

然后您可以使用上面的索引方法选择第一个字母

score -2 · Accepted Answer

伪元素“first-letter”是不言自明的，它仅用于第一个字母。其余的每个字母是否会有不同的样式？如果没有，您可能希望将每个字母包装在一个跨度标记中并为其分配一个 CSS 规则。

现在您可以将其余字母作为一个整体进行样式设置。然后在你的 CSS 中：

#namer:first-letter {
color:#09C;
font-size:1.1em;
font-weight:bold;
}

span {
color:red;
.
.
.
}

如果您想为每个字母设置样式，您可以尝试使用跨度包装每个字母。但是，它在视觉上可能看起来一团糟。注意：为你的班级想一个更好的名字#LOL

3 回答 3