CSS中的::first-letter和::first-line伪元素详解

描述
::first-letter和::first-line是CSS中的伪元素，用于为文本内容的第一个字母和第一行应用特殊样式。它们可以让排版更加精美，无需修改HTML结构即可实现专业的印刷效果。

基本概念
伪元素不是真实的HTML元素，而是CSS创建的虚拟元素，用于选择元素的特定部分。::first-letter选择块级元素首行的第一个字母，::first-line选择块级元素的第一行文本。

::first-letter伪元素详解

1. 适用元素

• 仅适用于块级容器（如div、p、h1等）
• 不适用于内联元素或display: inline的元素

2. 样式属性支持
::first-letter支持以下类型的CSS属性：

• 字体属性（font-size、font-family、font-weight等）
• 颜色属性（color）
• 背景属性（background）
• 文本属性（text-decoration、text-transform等）
• 外边距（margin）
• 内边距（padding）
• 边框（border）
• float和vertical-align

3. 基本用法

p::first-letter {
  font-size: 2em;
  font-weight: bold;
  color: #ff0000;
  float: left;
  margin-right: 5px;
}

4. 特殊规则

• 如果元素以标点符号开头，::first-letter会包含标点符号和第一个字母
• 支持::before伪元素生成的内容
• 如果第一个字母前有图片，::first-letter可能不会生效

::first-line伪元素详解

1. 适用条件

• 仅适用于块级元素
• 第一行的长度取决于视口宽度、字体大小等因素

2. 样式属性支持
::first-line支持：

• 字体属性
• 颜色属性
• 背景属性
• word-spacing、letter-spacing
• text-decoration、text-transform
• line-height

3. 不支持属性

• 不支持盒模型属性（margin、padding、border）
• 不支持text-indent

4. 基本用法

p::first-line {
  font-weight: bold;
  color: #333;
  text-transform: uppercase;
  letter-spacing: 1px;
}

实际应用技巧

1. 首字下沉效果

.article-content::first-letter {
  font-size: 3em;
  float: left;
  line-height: 1;
  margin-right: 8px;
  font-weight: bold;
  color: #2c3e50;
}

2. 首行特殊样式

.poem::first-line {
  font-variant: small-caps;
  color: #8e44ad;
  font-weight: 600;
}

3. 组合使用

.intro::first-letter {
  font-size: 2.5em;
  float: left;
  margin: 0 5px 0 0;
}

.intro::first-line {
  font-weight: bold;
  color: #27ae60;
}

4. 响应式考虑
由于::first-line基于当前视口宽度，在响应式设计中需要特别注意：

@media (max-width: 768px) {
  .content::first-line {
    font-size: 1.1em; /* 移动端调整 */
  }
}

注意事项

1. 浏览器兼容性

   • 现代浏览器都良好支持
   • 旧版本IE需要使用单冒号语法（:first-letter）

2. 特异性计算

   • 伪元素的选择器特异性与普通类选择器相同（0,0,1,0）

3. 内容生成

   • 可以与content属性结合使用

   .special::before {
     content: "★ ";
   }
   .special::first-letter {
     color: gold; /* 会作用于星号 */
   }
   

调试技巧
使用开发者工具检查伪元素：

• 在Elements面板中查看伪元素样式
• 可以临时修改样式进行测试

这两个伪元素是提升网页排版质量的重要工具，合理使用可以让文本内容更具可读性和视觉吸引力。