CSS3 target伪类简介,以实现tab效果为例子

泡在网上的日子 / 文 发表于2013-06-17 01:00 次阅读 css3

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

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

浏览器支持

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

如何使用:target

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

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

实例

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

HTML结构:

<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代码:

/*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页面

从demo里面可以看出,采用这种方式来实现在滚动条滑动到y值不为0的情况下,页面会很意外的跳到顶部,这大大的降低了这种方法的实用性,不过作为一种知识储备,这篇文章还是有用的。


收藏 赞 (0) 踩 (0)
上一篇:CSS3动画属性Transition
今天我们接着一起来看CSS3动画属性中的一个属性Transition。 W3C标准中对css3的transition这是样描述的:“css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画
下一篇:响应式网页设计入门
响应式网页设计(Responsive Web Design)这个概念在2000年的时候就有人提出来了,其实我更喜欢将其翻译为自适应网页设计,阮一峰关于Responsive Web Design的一篇文章就是翻译为自适应网页设计,但是国内都采用了响应式网页设计这一生硬的翻译(你能第一次