CSS3 target伪类简介
浏览:1410次 出处信息
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/
建议继续学习:
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
扫一扫订阅我的微信号:IT技术博客大学习
<< 前一篇:webkit对于CSS3渐变样式语法的更新
后一篇:内联元素和块状元素,盒子模型 >>
文章信息
- 作者:神飞 来源: 前端观察
- 标签: target 伪类
- 发布时间:2011-01-17 23:02:18
近3天十大热文
- [67] Oracle MTS模式下 进程地址与会话信
- [65] Go Reflect 性能
- [65] 如何拿下简短的域名
- [59] android 开发入门
- [59] 图书馆的世界纪录
- [59] 【社会化设计】自我(self)部分――欢迎区
- [58] IOS安全–浅谈关于IOS加固的几种方法
- [53] 视觉调整-设计师 vs. 逻辑
- [47] 界面设计速成
- [47] 读书笔记-壹百度:百度十年千倍的29条法则