在单词中设置单个字母的样式

Question

我正在尝试设置“Siteripe”这个词。我希望每封信都有不同的颜色。如此page所示，我只能使用下面的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;
    }

Answer 1

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

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

#namer {
    color:red;
}

<强>更新

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

Answer 2

您应该能够使用没有索引的选择器选择整个文本

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

#namer {
    color:red!important;
}

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

Answer 3

伪元素“第一个字母”是不言自明的，仅用于第一个字母。其余每个字母是否都有不同的样式？如果没有，您可能希望在span标记中包装每个字母并为其指定CSS规则。

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

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

span {
color:red;
.
.
.
}

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

提出一个更好的名称