语言伪类选择器对于多语言版本的网站来说非常有用,可以根据不同语言版本设置页面的字体风格。
有两种方法为文档指定语言,如果使用HTML5,直接可以设置文档的语言:
<!DOCTYPE HTML>
<html lang="en-US">
另外一种方法就是手工在文档中指定lang属性,并设置对应的语言值,例如:
<body lang="fr">
E:lang(language) 表示选择匹配E的所有元素,且匹配元素指定了lang属性,而且其值为language。
语言伪类选择器的浏览器兼容性:需要IE8及以上,所有版本的FF, Chrome, Safari, 以及Opera9.2及以上。
下面通过一个例子来说明语言伪类选择器的使用,这个例子用于定义不同语言版本的引文风格。
对于多语言的网站,改变引文的不同样式,例如网站还有英语和法语的版本,在法语中引文使用《》包含起来,而不是双引号。
一种实现方式是在切换页面语言选项的时候将页面元素的lang属性修改为语言对应的值,例如英语和法语网站的页面代码可以写为如下形式:
英语页面:
<!DOCTYPE HTML>
<html <strong>lang="en-US"</strong>>
<head>
<meta charset="UTF-8">
<title>语言伪类选择器</title>
</head>
<body>
<p>WWF's goal is to:
<q cite="http://www.wwf.org">
build a future were people live in harmony with nature
</q>
we hope they succeed.
</p>
</body>
</html>
显示结果:
法语页面:
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>语言伪类选择器</title>
</head>
<body>
<p>WWF's goal is to:
<q cite="http://www.wwf.org">
build a future were people live in harmony with nature
</q>
we hope they succeed.
</p>
</body>
</html>
显示效果:
也可以通过语言伪类选择器,为不同语言的页面元素设置不同的样式,例如不同的文字颜色或者背景颜色和字体字号背景图片等。
英语页面:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>语言伪类选择器</title>
<style type="text/css">
:lang(en) {
quotes: '"' '"';
}
:lang(en) q {
background: red;
}
</style>
</head>
<body>
<p>WWF's goal is to:
<q cite="http://www.wwf.org">
build a future were people live in harmony with nature
</q>
we hope they succeed.
</p>
</body>
</html>
显示效果:
法语页面:
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>语言伪类选择器</title>
<style type="text/css">
:lang(fr) {
quotes: "<<" ">>";
}
:lang(fr) q {
background: green;
}
</style>
</head>
<body>
<p>WWF's goal is to:
<q cite="http://www.wwf.org">
build a future were people live in harmony with nature
</q>
we hope they succeed.
</p>
</body>
</html>
显示结果:
参考资料:
2. http://www.w3.org/TR/css3-selectors/#lang-pseudo
3. http://stackoverflow.com/questions/3111643/css-pseudo-class-vs-pseudo-selector