CSS3 target伪类简介

CSS3 target伪类是众多实用的CSS3特性中的一个。它用来匹配文档(页面)的URI中某个标志符的目标元素。具体来说，URI中的标志符通常会包含一个”#”字符，然后后面带有一个标志符名称，比如#respond，target就是用来匹配ID为respond的元素的。

现在在页面中，点击一个ID链接后，页面只会跳转到相应的位置，但是并不会有比较明显的UI标识，使用:target伪类可以像:hover等伪类一样对目标元素定义样式。

浏览器支持

因为我们在讨论CSS3，所以它现在被除了IE6-8以外的所有浏览器支持，但是IE9会支持这个伪类。这是相当遗憾的，但是这个现实并不影响你使用它。

如何使用:target

:target伪类和:hover、:link、:visited、:focus等伪类的用法是一样的：

1
2
3
4

selector:target{
color:red;
/*other styles*/
}

实例

让我们通过一个简单的例子来演示。比如我们在页面中常常会用到tab，之前我们要用脚本来实现，YUI、jQuery也都有这样的插件或者模块，但是现在我们用:target伪类就可以实现。

HTML结构：

1
2
3
4
5
6
7
8
9
10
11

<ul
							class="tabs">
	<li><a
							href="#tab1">标签一</a></li>
	<li><a
							href="#tab2">标签二</a></li>
	<li><a
							href="#tab3">标签三</a></li>
</ul>
<div
							id="tab1"
							class="tab_content">
<!--tabed content--></div>
<div
							id="tab2"
							class="tab_content">
<!--tabed content--></div>
<div
							id="tab3"
							class="tab_content">
<!--tabed content--></div>

CSS3代码：

1
2
3
4
5
6
7
8

/*layout styles*/
.tab_content
						{
	position:
						absolute;/*set content box as absolute*/
	/*other layout styles*/
}
#tab1:target,
						#tab2:target,
						#tab3:target {
	z-index:
						1;
}

原理想必大家都看懂了，就是将tab内容框设置为绝对定位，然后通过:target伪类调整其z-index。

这里是个demo页面。

具体用法就是这么简单，在实际项目中大家就可以随意发挥了 :)

扩展阅读

• https://developer.mozilla.org/en/CSS/:target
• http://www.red-team-design.com/get-to-know-your-css3-target-pseudo-class
• http://css-tricks.com/css3-tabs/

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索标签
， 页面
， css3
， 元素
， target
一个
css3伪类选择器、css3伪类、css3新增伪类、css3新增的伪类、not css3伪类选，以便于您获取更多的相关知识。