揭秘CSS(第 1 版)
2.6.5 语言伪类选择器
阅读(

概述

CSS选择器

概述

基本选择器

关系选择器

属性选择器

伪元素选择器

伪类选择器

目标伪类选择器

否定伪类选择器

结构伪类选择器

链接伪类选择器

语言伪类选择器

语言伪类选择器,用来匹配使用指定语言的元素。对使用多语言版本的网站,可以根据不同语言版本,设置不同的样式。

表 2-9 语言伪类选择器
选择器功能描述版本
E:lang(language)选择使用指定语言,即lang属性等于language的E元素2

在HTML 中,可以通过元素的 lang属性,来定义该元素所使用的语言。如: 

<body lang = "en"> 
<p lang = "zh-cn">

而语言伪类选择器,就是根据元素的 lang属性,来匹配使用指定语言的元素。可以根据不同语言版本,设置不同的字体风格、定义不同的引号标记等。

如,有一个英文的段落和一个中文的段落,希望英文使用Arial字体、中文使用宋体,英文使用半角引号、中文使用全角引号。HTML代码如下:

<p lang="en"><q>Quote in English</q></p>
<p lang="zh-cn"><q>中文的引号</q></p>

这个就可以通过语言伪类选择器,为英文段落和中文段落定义不同的字体和不同的引号样式来实现。CSS代码如下:

:lang(en){
   font-family: Arial;
   quotes: '"' '"';
}
:lang(zh-cn){
   font-family: 宋体; 
   quotes: "“" "”";
}

运行结果如图 2‑22 所示:

语言伪类选择器
图2-22 语言伪类选择器

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验