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

CSS3 target伪类简单介绍

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

标签:CSS3 target伪类简单介绍 就是(19)用法(8)target(3)简单(23)详细(10)伪类(6)介绍(21)CSS3(90)
详细用法就是这么简单,在实际名目中大家就可以随便施展了 。 当初在页面中,点击一个ID链接后,页面只会跳转到相应的地位,然而并不会有比拟显明的UI标识, CSS3 RGBA颜色类型不等于RGB与opacity相加 ,使用:target伪类能够像:hover等伪类一样对目的元素定义
CSS3 target伪类简单介绍》文章地址:http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302331a2013.htm

详细用法就是这么简单,在实际名目中大家就可以随便施展了 。

当初在页面中,点击一个ID链接后,页面只会跳转到相应的地位,然而并不会有比拟显明的UI标识,CSS3 RGBA颜色类型不等于RGB与opacity相加,使用:target伪类能够像:hover等伪类一样对目的元素定义款式。

Tag:CSS3   target   伪类     CSS3   target   伪类    

如何应用:target
:target伪类跟:hover、:link、:visited、:focus等伪类的用法是一样的:

这里是个demo页面。

HTML构造:


CSS3 target伪类是众多适用的CSS3特征中的一个。它用来匹配文档(页面)的URI中某个标记符的目标元素。详细来说,URI中的标志符通常会包括一个&rdquo,CSS3 Media Queries详解;#”字符,CSS3 Gradient 创建水晶按钮实例,然后后面带有一个标志符名称,好比#respond,target就是用来匹配ID为respond的元素的。

CSS3代码:

浏览器支持
由于我们在探讨CSS3,所以它现在被除了IE6-8以外的所有阅读器支持,css3 border-image使用说明,但是IE9会支撑这个伪类,CSS11个class与一个id谁的优先级高。这是相称遗憾的,但是这个事实并不影响你使用它。

--> [网站建设之]CSS3 target伪类简单先容

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

 /*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。

 <ul class="tabs">
 <li><a href="#tab1">标签一</a></li>
 <li><,css-sprite适用的条件 对css-sprite的理解;a href="#tab2">标签二</a></li>
 <li><a href=",CSS+DIV网页重构对比TABLE显著优势;#tab3">标签三</a></li>,CSS+DIV网站优化(seo);
</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>

实例
让我们通过一个简略的例子来演示。比方我们在页面中经常会用到tab,CSS 通过一个样式表区分IE的各个版本,之前我们要用脚原来实现,CSS 连接后面加上 表示什么意思,YUI、jQuery也都有这样的插件或者模块,但是现在咱们用:target伪类就可以实现。


(责任编辑:网站建设)
CSS3 target伪类简单介绍相关文章
上一篇:CSS3 RGBA颜色类型不等于RGB与opacity相加 下一篇:CSS3 Transition属性详解
回到顶部