如何使用CSS根据浏览器语言更改元素样式？

没问题！完全可以通过CSS的:lang()伪类结合样式层叠来实现你的需求，全程不用修改任何HTML代码，刚好适配你动态引入CSS的场景。

实现代码 #

首先我们先设置默认的文本方向为ltr，然后针对阿拉伯语（包括标准阿拉伯语ar和沙特阿拉伯阿拉伯语ar-sa）的情况覆盖为rtl：

/* 默认全局文本方向为左到右 */
body {
  direction: ltr;
}

/* 当浏览器语言为ar或ar-sa时，切换为右到左 */
body:lang(ar), body:lang(ar-sa) {
  direction: rtl;
}

如果需要作用于所有嵌套组件或元素，也可以把选择器换成通配符*，不过用body作为选择器会更高效——页面的文本方向通常会被子元素继承，无需逐个设置。

原理说明 #

:lang()伪类会自动识别浏览器的首选语言设置，哪怕你的HTML没有设置lang属性，它也能正常工作。浏览器会根据自身的语言偏好匹配对应的:lang()规则，从而自动切换文本方向。这种方式完全满足你“不修改HTML、无需重新部署站点”的要求，只要动态引入这段CSS即可生效。

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