根据lang属性

Question

我在“ body”标签中设置了lang属性。我的应用程序中有不同的语言集。我需要根据不同的lang值为所有元素设置单独的样式。
例如：

• 如果lang = es-cl，则需要设置不同的样式集。
• 如果lang = pt-br，则设置不同的样式集。

达到此目的的最佳实践是什么（仅在使用CSS的情况下）？

我可以做以下事情吗（父母的孩子可以这样）。
body：lang（it）{    
   
  .header {     ... css样式..   }   

  .content .left-panel {     ... css样式...   }

}

谢谢

Answer 1

您可以使用CSS值选择器， [attribute * =“ value”]：

[lang="es-cl"]

或

[lang="pt-br"]

Answer 2

有两种使用CSS属性选择器实现此目的的方法

div[lang="en"] {
  background-color: yellow;
}

和CSS伪类

div:lang(en) {
  css declarations;
}

这将选择具有lang="en"属性的所有div元素。如果要选择所有具有属性lang="en"的元素，请从CSS选择器中删除div。