CSS如何利用--first-letter设置首字下沉_通过文本伪元素打造报纸排版

::first-letter 仅对块级容器内首个字母或标点生效，要求父元素为 block/inline-block，禁用 flex/grid；支持 font-size、float 等装饰性样式，禁用 margin（除左右）、width/height、position；中文需确保无前置空白、使用合适字体。为什么 ::first-letter 在现代 CSS 中经常"不生效"不是你写错了，而是它被一堆隐式条件卡住了。这个伪元素只对块级容器里的**第一个字母或标点**生效，且要求父元素是块盒（display: block 或 inline-block 等），不能是 display: inline 或 flex/grid 容器的直接子元素。常见错误现象：::first-letter 完全没反应、首字样式被重置、中文首字不生效（其实是支持的，但容易因字体或 Unicode 断行问题被忽略）。确保目标元素是块级容器，比如 p、div，不要套在 span 或 a 里再试图选它的 ::first-letter避免父元素设了 display: flex 或 display: grid ------ 这会让子 p 的首字脱离"块级上下文"，伪元素失效如果用了 text-transform: uppercase 或 lowercase，::first-letter 会作用于转换后的字符，不是原始文本::first-letter 支持哪些样式？哪些绝对不行它能用的 CSS 属性非常有限，浏览器只允许"装饰性"的排版控制，不能影响布局流。比如可以改颜色、字体大小、行高、浮动，但不能设 margin（除了 margin-left 和 margin-right）、不能设 width/height（除非配合 float）、不能用 position。典型可用样式：font-size、line-height、color、float、text-decoration、font-weight；不可用：display、transform、border（部分浏览器支持，但行为不一致）、padding（无效）。立即学习"前端免费学习笔记（深入）"；想让首字下沉两行？设 font-size: 3em + line-height: 1 + float: left 是最稳方案加边框？别用 border，改用 outline 或包一层 span 手动控制（这时就不是伪元素了）中文报纸风常用"大字+右侧文字环绕"，必须配 float: left，否则文字不会绕排中文首字下沉的兼容性坑：字体、断行与标点中文没有"首字母"概念，但 ::first-letter 对 UTF-8 下的汉字、标点（如《、"、【）都有效------前提是它们确实是 DOM 文本节点的第一个字符。问题常出在 HTML 源码里有空格、换行、或前置注释/内联脚本。 标贝科技 标贝科技-专业AI语音服务的人工智能开放平台