📌  相关文章
📜  CSS | :lang 选择器(1)

📅  最后修改于: 2023-12-03 15:00:06.015000             🧑  作者: Mango

CSS | :lang 选择器

CSS | :lang 选择器用于选取指定语言的元素。该选择器基于 HTML 标记的 lang 特性来匹配。:lang 选择器可以匹配 lang 属性的任何部分，而不仅仅是整个属性值。

语法
:lang(language)
  • language：必需。指定的语言代号或名称。例如："fr"、"en"或"en-us"。
实例

匹配 lang 属性值为 "en" 的所有元素：

:lang(en){
  color: blue;
}

匹配 lang 属性值以 "en-" 开头的所有元素：

:lang(en-) {
  color: red;
}
含义

:lang 选择器选择指定语言的元素。该选择器匹配 lang 特性以指定字符串开始、指定字符串以"-"分隔或完全匹配该字符串的所有元素。匹配是区分大小写的。例如：

<html lang="en">
  <head>  
  </head>
  <body>
    <div lang="en-us"></div>
    <div lang="en-uk"></div>
    <div lang="fr"></div>
  </body>
</html>

样式表设置所有使用语言为英语的元素颜色为蓝色：

:lang(en) {
  color: blue;
}

其中，<html>元素的 lang 特性的值为 "en"，所以中的 head 和 body 元素都与该选择器的设置匹配。第一个 div 元素在 "en-us" 前缀中包含 "en"，它也与选择器匹配。第二个 div 元素确切是 "en-uk"，完全匹配，也与选择器匹配。第三个 div 元素有 lang 特性，但它的值不包含 "en"，所以不与选择器匹配。

总结

优秀的开发人员应该熟悉和掌握 :lang 选择器的用法，以便更好地优化代码和提高网站的性能。