编辑“︁CSS first-line 伪元素”︁（章节）

= CSS ::first-line 伪元素 =

'''::first-line''' 是 CSS 中的一个伪元素，允许开发者针对文本块（如段落、标题等）的首行应用特殊样式，而无需额外添加 HTML 标记。它是 CSS 选择器功能的一部分，常用于增强排版效果。

== 基本语法 ==
::first-line 伪元素的语法如下：
<syntaxhighlight lang="css">
selector::first-line {
    property: value;
}
</syntaxhighlight>
其中：
* '''selector''' 是目标元素（如 <code>p</code>、<code>div</code> 等）
* '''property''' 是可应用的 CSS 属性（如 <code>color</code>、<code>font-weight</code> 等）

=== 适用属性 ===
并非所有 CSS 属性都能用于 ::first-line。允许使用的属性包括：
* 字体相关：<code>font</code>, <code>font-size</code>, <code>font-family</code>, <code>font-weight</code> 等
* 颜色相关：<code>color</code>, <code>background-color</code>
* 文本相关：<code>text-decoration</code>, <code>text-transform</code>, <code>letter-spacing</code>, <code>word-spacing</code>
* 布局相关：<code>line-height</code>, <code>vertical-align</code>

== 示例 ==
以下是一个简单示例，将段落首行设为红色加粗：
<syntaxhighlight lang="css">
p::first-line {
    color: red;
    font-weight: bold;
}
</syntaxhighlight>

'''HTML 输入:'''
<syntaxhighlight lang="html">
<p>这是一个示例段落。这段文字的首行将被特殊样式修饰，而其余行保持默认样式。</p>
</syntaxhighlight>

'''输出效果:'''
<div style="border:1px solid #ddd; padding:10px; font-family:monospace">
<p style="color:red;font-weight:bold;margin:0">这是一个示例段落。这段文字的首行将被特殊样式修饰，</p>
<p style="margin:0">而其余行保持默认样式。</p>
</div>

== 浏览器渲染机制 ==
浏览器在应用 ::first-line 样式时会动态计算哪些文本属于"首行"。影响首行范围的因素包括：
* 元素宽度
* 字体大小
* 文本内容
* 视口大小（响应式布局中）

<mermaid>
graph TD
    A[开始渲染元素] --> B{计算首行文本}
    B -->|基于当前布局| C[应用::first-line样式]
    C --> D[渲染剩余文本]
</mermaid>

== 实际应用场景 ==
=== 1. 杂志风格排版 ===
<syntaxhighlight lang="css">
article p::first-line {
    font-variant: small-caps;
    letter-spacing: 1px;
    color: #333;
}
</syntaxhighlight>

=== 2. 强调引言 ===
<syntaxhighlight lang="css">
blockquote::first-line {
    font-size: 1.2em;
    text-decoration: underline;
}
</syntaxhighlight>

=== 3. 响应式设计注意事项 ===
由于首行长度会随视口变化，建议避免使用精确的像素值：
<syntaxhighlight lang="css">
/* 不推荐 */
p::first-line {
    font-size: 18px;
}

/* 推荐 - 使用相对单位 */
p::first-line {
    font-size: 1.2rem;
}
</syntaxhighlight>

== 技术细节 ==
* '''兼容性'''：所有现代浏览器都支持 ::first-line（旧版浏览器可能使用单冒号语法 <code>:first-line</code>）
* '''特异性'''：伪元素的选择器特异性与普通选择器相同
* '''继承'''：首行样式会继承父元素的可继承属性
* '''动态性'''：当用户调整浏览器大小时，首行范围会重新计算

== 数学关系 ==
首行字符数可通过以下公式估算：
<math>
N \approx \frac{W}{w}
</math>
其中：
* <math>N</math> = 首行字符数
* <math>W</math> = 容器宽度（px）
* <math>w</math> = 平均字符宽度（px）

== 常见问题 ==
'''Q: 可以同时使用 ::first-line 和 ::first-letter 吗？'''
A: 可以，且 ::first-letter 的样式会覆盖 ::first-line 的冲突属性。

'''Q: ::first-line 能在行内元素上使用吗？'''
A: 不能，它只适用于块级元素或设置为 <code>display: block</code> 的元素。

== 最佳实践 ==
1. 保持首行样式与整体设计协调
2. 避免过度修饰影响可读性
3. 在移动设备上测试响应式效果
4. 考虑使用 CSS 预处理器生成更复杂的首行样式

== 扩展练习 ==
尝试创建以下效果：
* 报纸风格的首行全大写
* 渐变背景色的首行
* 首行缩进与其他行不同的排版

<syntaxhighlight lang="css">
/* 练习示例 */
.newspaper::first-line {
    text-transform: uppercase;
    background: linear-gradient(to right, #f00, #00f);
    text-indent: 1em;
}
</syntaxhighlight>

通过掌握 ::first-line 伪元素，开发者可以创建更专业的排版效果，而无需修改 HTML 结构。

[[Category:编程语言]]
[[Category:CSS]]
[[Category:CSS高级选择器]]