CSS3学习笔记之语言伪类选择器

最新推荐文章于 2024-04-25 20:37:26 发布

atleks

最新推荐文章于 2024-04-25 20:37:26 发布

阅读量886

点赞数

文章标签： css3

本文链接：https://blog.csdn.net/atleks/article/details/38966711

版权

语言伪类选择器对于多语言版本的网站来说非常有用，可以根据不同语言版本设置页面的字体风格。

有两种方法为文档指定语言，如果使用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>

显示结果：

参考资料：

1. 《图解CSS3：核心技术与案例实战》

2. http://www.w3.org/TR/css3-selectors/#lang-pseudo

3. http://stackoverflow.com/questions/3111643/css-pseudo-class-vs-pseudo-selector

4. http://stackoverflow.com/questions/8916360/whats-the-difference-between-htmllang-en-and-htmllangen-in-css

5. http://stackoverflow.com/questions/25184755/have-two-css-embedded-languages-style-in-web-page-for-different-text-lang-type/25184880#25184880

atleks

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
CSS3学习笔记之语言伪类选择器

语言伪类选择器对于多语言版本的网站来说非常有用，可以根据不同语言版本设置页面的字体风格。有两种方法为文档指定语言，如果使用HTML5，直接可以设置文档的语言：另外一种方法就是手工在文档中指定lang属性，并设置对应的语言值，例如：E:lang(language) 表示选择匹配E的所有元素，且匹配元素指定了lang属性，而且其值为language。语
复制链接

扫一扫