CSS3 target伪类是众多实用的CSS3特性中的一个。它用来匹配文档(页面)的URI中某个标志符的目标元素。具体来说,URI中的标志符通常会包含一个”#”字符,然后后面带有一个标志符名称,比如#respond,target就是用来匹配ID为respond的元素的。
现在在页面中,点击一个ID链接后,页面只会跳转到相应的位置,但是并不会有比较明显的UI标识,使用:target伪类可以像:hover等伪类一样对目标元素定义样式。
浏览器支持
因为我们在讨论CSS3,所以它现在被除了IE6-8以外的所有浏览器支持,但是IE9会支持这个伪类。这是相当遗憾的,但是这个现实并不影响你使用它。最专业的UI前端框架!
如何使用:target
:target伪类和:hover、:link、:visited、:focus等伪类的用法是一样的:
- selector:target{
- color:red;
- /*other styles*/
- }
实例
让我们通过一个简单的例子来演示。比如我们在页面中常常会用到tab,之前我们要用脚本来实现,YUI、jQuery也都有这样的插件或者模块,但是现在我们用:target伪类就可以实现。
HTML结构: 最专业的UI前端框架!
- <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。最专业的UI前端框架!
这里是个demo页面。
相关推荐
SS3 target伪类是众多实用的CSS3特性中的一个。它用来匹配文档(页面)的URI中某个标志符的目标元素。
以前我还是比较忽视这两个家伙的,今天第一次见到原来伪类的好处这么多,以后会多多推荐CSS3伪类实现的效果 使用方法: 1、将head中的CSS样式引入到你的网页中 2、在你需要变成标签的html处增加class = ...
jQuery+css实现tab切换效果 jQuery+css实现tab切换效果源代码
莫要慌,实现方法有很大,今天懒人哥哥就教你一招如何用CSS3的伪类实现这个效果 关键在于CSS的伪类after中的content,它可以直接指定当前样式标签里的内容 废话不多说,仔细看代码你就懂啦(什么?你一点CSS基础...
纯css3实现的tab标签切换效果
jquery CSS3实现手机滑屏tab菜单效果 j
CSS3实现的tab多页签代码,效果很棒,童鞋们可下载瞧瞧撒
css3实现的tab标签切换效果
CSS中的伪类,其中讲的很清楚,不懂的同学可以参考
CSS3实现伪对象立体按钮效果
纯CSS3实现的tab标签,可自适应高度
使用方法: 1、将head中的CSS样式引入到你的网页中 2、在你需要变成标签的html处增加class = “admin5”即可
纯CSS3实现TAB选项卡切换是一款带有淡入淡出渐变效果的CSS3标签选项卡特效。
纯CSS实现的tab标签切换代码,其实是由六个html文件组成,相互切换的效果。懒人之家推荐下载
效果图地址:http://blog.sina.com.cn/s/blog_6b759ccf0101mbbt.html
纯css:hover伪类多级下拉菜单代码演示地址:http://www.777moban.com/Preview/28_198/
简单的javascript+css实现Tab效果,内含javascript 事件介绍。
CSS3 多种TAB选项卡效果
CSS3实现Tab菜单小工具是一款外观非常简洁清新,tab选项卡的上边框有加粗的线条,让这些tab菜单按钮显得很有立体感。
CSS3实现烟花特效-图片+css