当前位置: 网站建设 > 网页设计 > 建站经验 >

CSS3入门教程:target伪类简介

时间:2013-03-02 03:42来源:未知 作者:admin 点击:

标签:CSS3入门教程:target伪类简介 CSS3(90)target(3)layout(1)入门教程(37)伪类(6)简介(5)
/*layout styles*/ .tab_content { position: absolute;/*set content box as absolute*/ /*other layout styles*/ } #tab1:target, #tab2:target, CSS3入门教程(9):RGBA声明 , #tab3:target { z-index: 1; } CSS3 target伪类是众多适用的CSS3特征中的一个
CSS3入门教程:target伪类简介》文章地址:http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302332132013.htm

 /*layout styles*/
.tab_content {
 position: absolute;/*set content box as absolute*/
 /*other layout styles*/
}
#tab1:target, #tab2:target,CSS3入门教程(9):RGBA声明, #tab3:target {
 z-index: 1;
}

CSS3 target伪类是众多适用的CSS3特征中的一个。它用来匹配文档(页面)的URI中某个标志符的目的元素。详细来说,URI中的标志符通常会包括一个”#”字符,而后后面带有一个标记符名称,比方#respond,target就是用来匹配ID为respond的元素的,CSS3入门教程(8):关于透明度

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


详细用法就是这么简略,在实际名目中大家就能够随便施展了 :)

当初在页面中,点击一个ID链接后,页面只会跳转到相应的地位,然而并不会有比拟显明的UI标识,应用:target伪类可以像:hover等伪类一样对目标元素定义款式,CSS3入门教程(7):嵌入字体

 

如何使用:target
:target伪类跟:hover、:link、:visited、:focus等伪类的用法是一样的:
 selector:target{
color:red;
/*other styles*/
}

浏览器支持
由于我们在探讨CSS3,所以它现在被除了IE6-8以外的所有阅读器支持,但是IE9会支撑这个伪类。这是相称遗憾的,但是这个事实并不影响你使用它。

 <ul class="tabs">
 ,CSS3入门教程(6):多列 多卷;<li><a href="#tab1">标签一</a></li>
 <li><a href="#tab2">标签二</a></li>
 ,CSS3入门教程(5):背景图片(背景大小和多背景图);<li><,CSS3入门教程(4):关于阴影;a href="#tab3",CSS3入门教程(3):边框颜色;>标签三</a></li>
</ul>
<div id="tab1" class="tab_content",CSS3入门教程(2):边框半径和圆角;>
<!--tabed content--></div>
<div id="tab2" class="tab_content",CSS3入门教程(10):HSL和HSLA;>
<!--tabed content--></div>
<div id="tab3" class="tab_content">
<!--tabed content--></div>

CSS3代码:

Tag:target伪类  ,CSS3入门教程(1):CSS3简介; CSS入门   target伪类   CSS入门  

HTML构造:

CSS3入门教,本文为你先容target伪类简介

--> [网站建设之]CSS3入门教程:target伪类简介

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


(责任编辑:网站建设)
CSS3入门教程:target伪类简介相关文章
上一篇:CSS3入门教程(9):RGBA声明 下一篇:css3制作网页实例 点击切换不同的CSS列表
回到顶部