Question

设置我使用的第一个字母的样式：段落中的第一个字母。

p:first-letter { 
    font-size: 200%;
    color: #8A2BE2;
}

但是，如果我想设置段落中每个单词的第一个字母，该怎么办？

Answer 1

没有向标记（或使用JavaScript的DOM树）添加额外元素的CSS方法，因为没有用于此目的的CSS选择器。

如果您为每个单词添加标记，则可以对它们使用:first-letter，如果您将它们设置为内嵌块（:first-letter不能用于内联元素，这是span所用的内容默认值）：

<style>
.word {
  display: inline-block;
}
.word:first-letter {
  font-size: 200%;
  color: #8A2BE2;
}
</style>
<span class=word>Hello</span> <span class=word>world</span>

或者，您当然可以为每个首字母使用标记，例如<span class=word>H</span>ello <span class=word>w</span>orld，并使用像.word这样的简单选择器来设置字符格式。然而，使用“单词标记”可能a）在HTML源代码中看起来更好，b）让你轻松地格式化整个单词，如果需要的话，c）避免因用标记破坏单词而导致的潜在风险（非常小）可能存在风险，但人们有时会担心这些风险。）

设置每个单词的第一个字母而不是第一个单词的样式？

1 个答案: