编辑“︁CSS语言伪类”︁（章节）

= CSS语言伪类 =

'''CSS语言伪类'''（Language Pseudo-class）是一种高级CSS选择器，允许开发者根据文档的语言属性（通常是HTML的<code>lang</code>属性）来匹配元素并应用样式。这类伪类在需要针对不同语言的文本进行特殊样式处理时非常有用，例如调整字体、排版或引号样式。

== 语法 ==
语言伪类的语法如下：
<syntaxhighlight lang="css">
:lang(language-code) {
  /* 样式规则 */
}
</syntaxhighlight>
其中<code>language-code</code>是标准的ISO语言代码（如<code>en</code>表示英语，<code>fr</code>表示法语）。

== 工作原理 ==
当HTML元素的<code>lang</code>属性值与<code>:lang()</code>伪类中指定的语言代码匹配时，相应的样式规则会被应用。该匹配是'''包容性'''的，即即使语言代码包含国家或地区后缀（如<code>en-US</code>或<code>en-GB</code>），只要基础语言代码匹配（如<code>en</code>），样式也会生效。

=== 与属性选择器的区别 ===
虽然可以使用属性选择器<code>[lang="..."]</code>实现类似效果，但<code>:lang()</code>伪类更强大，因为它：
* 能匹配继承的语言设置（从父元素继承<code>lang</code>属性的元素）
* 支持语言代码的部分匹配（如<code>:lang(en)</code>会匹配<code>en</code>、<code>en-US</code>等）

== 代码示例 ==
以下示例展示如何为不同语言的文本应用不同样式：

=== HTML结构 ===
<syntaxhighlight lang="html">
<p lang="en">This is an English paragraph.</p>
<p lang="fr">Ceci est un paragraphe en français.</p>
<p lang="de">Dies ist ein deutscher Absatz.</p>
<div lang="zh-CN">
  <p>这段文字继承了父元素的中文语言设置。</p>
</div>
</syntaxhighlight>

=== CSS样式 ===
<syntaxhighlight lang="css">
/* 英语文本使用Arial字体 */
:lang(en) {
  font-family: Arial, sans-serif;
  color: blue;
}

/* 法语文本使用特殊字体和颜色 */
:lang(fr) {
  font-family: "Times New Roman", serif;
  color: red;
}

/* 中文文本调整字号和行高 */
:lang(zh) {
  font-size: 1.2em;
  line-height: 1.6;
}
</syntaxhighlight>

=== 输出效果 ===
{| class="wikitable"
|-
! 语言 !! 显示效果
|-
| 英语 || <span style="font-family:Arial,sans-serif; color:blue;">This is an English paragraph.</span>
|-
| 法语 || <span style="font-family:'Times New Roman',serif; color:red;">Ceci est un paragraphe en français.</span>
|-
| 中文 || <span style="font-size:1.2em; line-height:1.6;">这段文字继承了父元素的中文语言设置。</span>
|}

== 实际应用场景 ==

=== 1. 多语言网站的排版调整 ===
不同语言的文字可能需要不同的排版处理。例如：
* 中文和日文通常需要更大的字号来提高可读性
* 阿拉伯语等从右向左(RTL)语言需要调整文本方向

=== 2. 语言特定的引号样式 ===
<syntaxhighlight lang="css">
/* 为不同语言设置不同的引号样式 */
:lang(en) q { quotes: '"' '"' "'" "'"; }
:lang(fr) q { quotes: "«" "»" "'" "'"; }
:lang(de) q { quotes: "»" "«" "'" "'"; }
</syntaxhighlight>

=== 3. 字体选择优化 ===
某些字体对特定语言的显示效果更好：
<syntaxhighlight lang="css">
/* 为日语选择优化字体 */
:lang(ja) {
  font-family: "Hiragino Sans", "Meiryo", sans-serif;
}

/* 为阿拉伯语选择专用字体 */
:lang(ar) {
  font-family: "Traditional Arabic", sans-serif;
  direction: rtl;
}
</syntaxhighlight>

== 浏览器兼容性 ==
语言伪类在现代浏览器中有很好的支持，包括：
* Chrome 1+
* Firefox 1+
* Safari 3.1+
* Edge 12+
* Opera 8+

== 注意事项 ==
1. '''语言代码区分大小写'''：<code>:lang(en)</code>与<code>:lang(EN)</code>不同
2. '''继承行为'''：子元素会继承父元素的<code>lang</code>属性，除非显式覆盖
3. '''默认语言'''：建议在<code><html></code>标签中设置默认语言属性

== 高级用法 ==
可以组合使用语言伪类和其他选择器实现更精确的控制：

=== 1. 结合属性选择器 ===
<syntaxhighlight lang="css">
/* 仅匹配明确声明lang="zh"的元素，不匹配继承的情况 */
[lang="zh"] {
  /* 特殊样式 */
}
</syntaxhighlight>

=== 2. 多重语言匹配 ===
<syntaxhighlight lang="css">
/* 同时匹配英语和法语 */
:lang(en), :lang(fr) {
  /* 共享样式 */
}
</syntaxhighlight>

== 性能考虑 ==
语言伪类的性能通常很好，但在以下情况可能影响渲染性能：
* 在大型文档中频繁使用
* 与复杂选择器组合使用

== 总结 ==
CSS语言伪类<code>:lang()</code>是处理多语言网站样式的强大工具，它比简单的属性选择器更灵活，能自动处理语言继承情况。合理使用这一特性可以显著提升国际化网站的用户体验。

<mermaid>
graph TD
    A[文档元素] --> B{有lang属性?}
    B -->|是| C[匹配:lang选择器]
    B -->|否| D[继承父元素lang]
    D --> E{父元素有lang?}
    E -->|是| C
    E -->|否| F[使用默认语言]
</mermaid>

通过上述流程图可以看到，浏览器如何决定元素的语言属性并应用相应的<code>:lang()</code>样式规则。

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