如何为CSS :lang()伪类指定多语言列表以简化样式代码？

一、LESS 原生解决方案（推荐） #

LESS 自带的 each() 遍历函数可以直接通过定义语言列表批量生成目标选择器，完全匹配你的需求：

// 定义需要设置样式的语言列表
@languages: af, sq, eu, bs, ca, kw, hr, cs, da, nl;

// 遍历列表自动生成:lang()选择器
each(@languages, {
  :lang(@value) {
    font-size: 100px;
    // 可添加更多通用样式
  }
});

编译后会自动生成你原本手动编写的那种逗号分隔的完整 CSS 选择器列表，无需逐个重复书写。

二、原生 CSS 简化写法 #

如果不想依赖预处理器，可以用 CSS 的 :is() 选择器简化代码结构，减少重复的 :lang() 书写：

:is(:lang(af), :lang(sq), :lang(eu), :lang(bs), :lang(ca), :lang(kw), :lang(hr), :lang(cs), :lang(da), :lang(nl)) {
  font-size: 100px;
}

这种写法虽然仍需列出所有语言，但比原代码更简洁易读。

三、原生 CSS + JavaScript 动态生成 #

如果需要更灵活的动态语言列表（比如从后端接口获取），可以用 JS 动态生成样式：

// 语言列表可按需修改或从外部获取
const languages = ['af', 'sq', 'eu', 'bs', 'ca', 'kw', 'hr', 'cs', 'da', 'nl'];
// 拼接选择器字符串
const selector = languages.map(lang => `:lang(${lang})`).join(', ');
// 创建并插入样式到页面
const style = document.createElement('style');
style.textContent = `${selector} { font-size: 100px; }`;
document.head.appendChild(style);

内容的提问来源于stack exchange，提问作者jonstieg