CSS :lang选择器用法示例

2021年3月16日11:56:19 发表评论 820 次浏览

:lang选择器用于将基于语言属性的元素作为特定值的目标。该选择器在语言代码的帮助下工作。

语法如下:

:lang(lang-code) {
  //property
}

语言代码:

  • en:对于英语。
  • hi:对于印地语。
  • fr:对于法语。
  • de:对于德语
  • it:对于意大利语
  • ca:对于加拿大

示例1:

<!DOCTYPE html>
< html >
  
< head >
     < style >
         h3:lang(en) {
             background: limegreen;
         }
     </ style >
</ head >
  
< body >
  
     < h3 lang = "en" >"en" is lang-code for english.</ h3 >
  
</ body >
  
</ html >

输出如下:

CSS | :lang选择器1

示例2:语言代码适用于根元素。

<!DOCTYPE html>
< html >
  
< head >
     < style >
         h3:lang(en) {
             background: limegreen;
         }
     </ style >
</ head >
  
< body lang = "en" >
  
     < h3 >"en" is lang-code for English.</ h3 >
     < h3 >"fr" is lang-code for French.< h3 >
< h3 >"de" is lang-code for German.< h3 >
</ body >
</ html >

输出如下:

CSS | :lang选择器2

支持的浏览器:

  • 谷歌浏览器4.0
  • 边缘8.0
  • Firefox 2.0
  • Safari 3.1
  • 歌剧9.6

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: