如何在CSS中使用:first-letter选择器_首字母放大或设置颜色-css教程-PHP中文网

如何在CSS中使用:first-letter选择器_首字母放大或设置颜色

P粉602998670

发布： 2025-11-30 20:15:02

原创

569人浏览过

::first-letter 伪元素用于选中块级元素第一行的首字母，实现首字放大或下沉效果；2. 使用 font-size、line-height、float 等属性可增强视觉表现；3. 可设置颜色、字体、加粗等样式提升装饰性；4. 仅对块级元素生效，首字符不应被内联标签包裹，且不支持所有CSS属性。

如何在css中使用:first-letter选择器_首字母放大或设置颜色

在CSS中，:first-letter 伪元素用于选中块级元素中第一行的第一个字母，并对其单独设置样式。这个选择器常用于实现“首字放大”效果（也叫“首字下沉”），常见于文章排版或杂志风格设计。

基本语法

使用 :first-letter 的方式如下：

p::first-letter {<br>  font-size: 2em;<br>  color: red;<br>}

登录后复制

注意：现代标准推荐使用双冒号 :: 来表示伪元素，以区别于伪类（如 :hover）。

实现首字母放大

通过增大字体大小和调整行高，可以让首字母更突出：

p::first-letter {<br>  font-size: 2.5em;<br>  line-height: 1;<br>  float: left;<br>  margin-right: 0.1em;<br>}

登录后复制

使用 float: left 可以让放大的首字母与后续文字自然对齐，形成经典的“首字下沉”布局。

设置首字母颜色或其它样式

除了放大，你还可以更改颜色、字体、加粗等：

article p::first-letter {<br>  color: #d63384;<br>  font-weight: bold;<br>  font-family: "Georgia", serif;<br>  text-transform: uppercase;<br>}

登录后复制

Type

生成草稿，转换文本，获得写作帮助-等等。

查看详情

立即学习“前端免费学习笔记（深入）”；

这会让首字母更具装饰性，适用于标题段落或引言部分。

注意事项

使用 :first-letter 时需注意以下几点：

只对块级元素生效（如 p、div、h1-h6），对 inline 元素无效
如果第一个字符被其他内联元素（如 <span>）包裹，可能无法正确选取
支持大多数文本相关属性：color、font、text-transform 等，但不支持所有 CSS 属性
可与 ::before 生成内容结合使用，但行为可能受浏览器影响

基本上就这些。合理使用 ::first-letter 能提升页面的视觉层次，让文本更有阅读美感。不复杂但容易忽略细节。

以上就是如何在CSS中使用:first-letter选择器_首字母放大或设置颜色的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

css中couters函数是什么 css中counter-increment属性是什么 css中id选择器的注意点 css中flex-wrap属性是什么 css中有哪些命名规范