css的lang属性选择器是专门用于匹配带有lang属性的元素的选择器，它会根据元素上设置的lang属性值来应用对应的样式规则，在多语言网站开发或者需要区分不同语言内容样式的场景中非常实用。
lang属性选择器的基本语法
lang属性选择器的语法格式为element:lang(language-code)，其中element是要匹配的元素标签，可省略，省略时表示匹配所有带有对应lang属性值的元素；language-code是语言代码，比如zh表示中文，en表示英文，zh-CN表示简体中文。
这个选择器会匹配所有lang属性值以指定语言代码开头的元素，比如设置:lang(zh)会匹配lang属性为zh、zh-CN、zh-TW等所有以zh开头的元素，不需要完全匹配属性值。
基础使用示例
下面通过一个简单的示例演示lang选择器的使用，首先准备html结构：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>lang选择器示例</title>
<style>
/* 匹配所有lang为zh开头的元素，设置文字颜色为红色 */
:lang(zh) {
color: #ff0000;
}
/* 匹配lang为en的p元素，设置文字颜色为蓝色 */
p:lang(en) {
color: #0000ff;
}
/* 匹配lang为zh-CN的div元素，设置背景色为浅灰色 */
div:lang(zh-CN) {
background-color: #f5f5f5;
}
</style>
</head>
<body>
<p lang="zh">这是一段中文内容</p>
<p lang="en">This is a paragraph in English</p>
<div lang="zh-CN">
<span>这是简体中文的div内部内容</span>
</div>
<div lang="zh-TW">
<span>這是繁體中文的div內部內容</span>
</div>
</body>
</html>
上述代码中，第一个p元素的lang为zh，会被:lang(zh)匹配，文字显示为红色；第二个p元素lang为en，被p:lang(en)匹配，文字显示为蓝色；第一个div元素lang为zh-CN，被div:lang(zh-CN)匹配，背景为浅灰色；第二个div元素lang为zh-TW，会被:lang(zh)匹配，文字显示为红色，背景没有额外设置所以保持默认。
lang选择器和其他属性选择器的区别
很多开发者会混淆[lang="zh"]和:lang(zh)这两个选择器，它们的匹配规则有明显差异：
[lang="zh"]是普通属性选择器，只会匹配lang属性值完全等于zh的元素，不会匹配zh-CN、zh-TW这类属性值。:lang(zh)是专门的lang属性选择器，会匹配所有lang属性值以zh开头的元素，包括zh-CN、zh-TW等，匹配范围更广，也更符合语言代码的层级规则。
我们可以通过下面的代码对比两者的差异：
/* 普通属性选择器，仅匹配lang="zh"的元素 */
[lang="zh"] {
font-weight: bold;
}
/* lang选择器，匹配所有lang以zh开头的元素 */
:lang(zh) {
font-style: italic;
}
当元素设置lang="zh-CN"时，只会被:lang(zh)匹配，文字变为斜体，不会被[lang="zh"]匹配，不会加粗。
实际应用场景
多语言网站样式适配
在多语言网站中，不同语言的文字排版需求可能不同，比如阿拉伯语是从右到左排版，中文和英文是从左到右，就可以用lang选择器设置不同的排版规则：
/* 阿拉伯语内容从右到左排版 */
:lang(ar) {
direction: rtl;
text-align: right;
}
/* 中文和英文内容从左到右排版 */
:lang(zh), :lang(en) {
direction: ltr;
text-align: left;
}
引用内容语言区分
当页面中引用了不同语言的内容时，可以用lang选择器给不同语言的引用内容添加不同的边框样式，方便用户区分：
/* 中文引用内容添加红色左边框 */
blockquote:lang(zh) {
border-left: 4px solid #ff0000;
padding-left: 16px;
}
/* 英文引用内容添加蓝色左边框 */
blockquote:lang(en) {
border-left: 4px solid #0000ff;
padding-left: 16px;
}
注意事项
- lang属性的值需要符合BCP 47语言标签规范，比如中文用
zh，简体中文用zh-CN，英文用en，美式英文用en-US，这样lang选择器才能正确匹配。 - lang选择器会继承父元素的lang属性值，如果子元素没有设置自己的lang属性，会继承父元素的lang值，从而被对应的选择器匹配。
- 如果要匹配具体的语言子标签，比如仅匹配
zh-CN，可以直接写:lang(zh-CN)，不需要额外处理，选择器会自动识别层级关系。