使用 CSS 将字符串的第一个字母大写

在网页开发中，有时候需要将字符串的第一个字母大写，如标题或序号等。虽然可以使用 JavaScript 对字符串进行处理，但是使用 CSS 实现更为简单和优雅。下面介绍两种常见的 CSS 实现方法。

1. 使用 ::first-letter 伪元素

CSS 伪元素是一种虚拟的元素，它可以让开发者在指定的 HTML 元素中创建一些不在文档树中的元素。其中 ::first-letter 伪元素将元素的第一个字母设置样式。可以指定 ::first-letter 伪元素的 font-size、font-family、color、text-decoration、line-height 等属性。

代码示例：

p::first-letter {
  text-transform: uppercase;
}

这段代码将会将 <p> 元素中的第一个字母转换为大写。你也可以将其应用于其他元素。

效果演示：

hello world

结果为：Hello world

:::info 注意：只有可替换元素才支持使用 ::first-letter 伪元素，这包括基于图像、音频、视频等多媒体元素和使用 object、iframe 或 canvas 等元素嵌入的文档等元素。 :::

2. 使用 text-transform 属性

text-transform 属性允许开发者控制文本的大小写。其中 capitalize 值将每个单词的首字母转换为大写。

代码示例：

p {
  text-transform: capitalize;
}

这段代码将会将每个 <p> 元素的每个单词的首字母转换为大写。你也可以将其应用于其他元素。

效果演示：

hello world

结果为：Hello World

:::info 注意：text-transform 属性将会影响元素内所有的文本，包括空格和标点符号。 :::

总结：

以上两种方法都可以实现将字符串的第一个字母大写的效果，使用 CSS 实现比在 JavaScript 中操作效果更为优美和简单。在实际开发中，建议尽量使用 CSS 实现字符串的样式效果。