如何用CSS的lang选择器归类同语言的多类样式代码？

完全可以将土耳其语（tr）的所有CSS样式统一写在一个区块里，以下是两种常用的实现方式：

1. 原生CSS嵌套（现代浏览器支持） #

现在主流现代浏览器（Chrome、Firefox、Edge等）已经支持原生CSS嵌套语法，直接把同语言的子选择器嵌套在语言属性选择器内部即可，代码结构更整洁：

html[lang|="tr"] {
  .test {
    /* 土耳其语下.test的样式，对应你原来的a规则 */
    /* 示例：color: red; */
  }
  .test2 {
    /* 土耳其语下.test2的样式，对应你原来的c规则 */
    /* 示例：font-size: 16px; */
  }
  /* 其他土耳其语专属的类样式都可以添加在这里 */
}

html[lang|="ar"] {
  .test {
    /* 阿拉伯语下.test的样式 */
  }
  .test1 {
    /* 阿拉伯语下.test1的样式 */
  }
}

如果需要兼容旧版浏览器，可以通过PostCSS的postcss-nesting插件将嵌套语法转译为传统CSS写法。

2. 使用CSS预处理器（Sass/Less/Stylus） #

如果你的项目已经在使用CSS预处理器，嵌套语法是这类工具的核心特性之一，写法和原生嵌套类似，编译后会自动生成符合浏览器标准的平铺选择器：

以Sass为例：

html[lang|="tr"] {
  .test {
    /* 样式内容 */
  }
  .test2 {
    /* 样式内容 */
  }
}

这种方式不仅能实现同语言样式的集中管理，还能结合预处理器的变量、混合宏等特性进一步优化多语言样式的维护。

备选方案：选择器分组（无需嵌套） #

如果暂时不想使用嵌套语法，也可以通过选择器分组来归类同语言样式，但可读性不如嵌套：

/* 土耳其语公共样式 */
html[lang|="tr"].test,
html[lang|="tr"].test2 {
  /* 公共样式属性 */
}

/* 土耳其语专属样式 */
html[lang|="tr"].test2 {
  /* 仅.test2的样式 */
}

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