图解css3：核心技术与案例实战. 2.6　语言伪类选择器

xiaoxiao2024-01-20 141

2.6　语言伪类选择器

使用语言伪类选择器来匹配使用语言的元素是非常有用的，特别是用于多语言版本的网站，其作用更是明显。可以使用他来根据不同语言版本设置页面的字体风格。

2.6.1　语言伪类选择器语法

语言伪类选择器是根据元素的语言编码匹配元素。这种语言信息必须包含在文档中，或者与文档关联，不能从CSS指定。为文档指定语言，有两种方法可以表示。如果使用HTML 5，直接可以设置文档的语言。例如：

<!DOCTYPE HTML>

另一种方法就是手工在文档中指定lang属性，并设置对应的语言值。例如：

语言伪类选择器允许为不同的语言定义特殊的规则，这在多语言版本的网站用起来是特别的方便。

E:lang(language)表示选择匹配E的所有元素，且匹配元素指定了lang属性，而且其值为language。

2.6.2　浏览器兼容性

浏览器兼容性如表2-10所示。

语言伪类选择器在IE 7及以下版本中还不被支持，对于追求完美的设计师来说，又有点畏惧，不敢使用。其实也不是没有办法，可以为不同的浏览器（IE 6和IE 7）采用不同的方法来实现。

对于IE 6浏览器，给引文元素在不同版本的时候设置不同的类名，例在英文版本下设置类名“.en”，而在法文版本下设置类名为“.fr”，就可以通过类名给引文定义不同的样式。

对于IE 7浏览器，也可以采用IE 6浏览器的方法。如果不考虑IE 6浏览器，可以使用属性选择器中的“E[foo|="en"]”选择器为不同语言版本的引文设置不同样式。

2.6.3　实战体验：定制不同语言版本引文风格

如果网站是一个多语言版本，使用语言伪类选择器为特定的语言定义不同样式是非常完美的。例如，多语言版本有一段这样的引文，如图2-18所示。

在多语言的网站中，改变引文的不同样式，例如网站还有一个法语语言版本，使用? ...?替代是不是比引号（“...”）更适合其语言版本呢？同时，为了突出引文的重要性，可以在不同的语言版本中给引文设置不同的背景颜色。最后的效果如图2-19所示。

图2-19　多语言版本引文的效果

在不增加任何代码或手工修改代码达到图2-19所示的引文效果，使用语言伪类选择器是一个不错的方法，示例代码如下所示。

<!DOCTYPE HTML>

<head>

<title>语言伪类选择器运用</title>

</head>

<body>

<p>WWF's goal is to:

build a future where people live in harmony with nature

</q> we hope they succeed.</p>

</body>

</html>

为<html>标签设置一个“lang=en-US”属性，这是默认英文版本的时候。当网站转译到法语版本，此时<html>标签中的lang属性值动态变成“fr”，如下所示。

<!DOCTYPE HTML>

<head>

<title>语言伪类选择器运用</title>

</head>

<body>

<p>WWF's goal is to:

build a future where people live in harmony with nature

</q> we hope they succeed.</p>

</body>

</html>

也可以简单地通过目标伪类来实现。

/*英文(en-US)版本的引文q效果*/

:lang(en) {

quotes:'"' '"';

}

:lang(en) q {background: red;}

/*法文(fr)版本的引文q效果*/

:lang(fr) {

quotes:'?' '?';

}

:lang(fr) q {background: green;}

提示大家也可以通过这种方法为不同语言版本的网站相关元素设置不同的样式，例如改变网站面页面的字号、设置不同的背景图片等。

图解css3：核心技术与案例实战. 2.6 语言伪类选择器

图解css3：核心技术与案例实战. 2.6　语言伪类选择器