CSS3 target伪类简介
发布人:一全科技 来源:前端观察 发布于:2011-02-14 23:53:20 浏览:996

辽宁12选5走势图表 www.jc1o.cn CSS3 target伪类是众多实用的CSS3特性中的一个。它用来匹配文档(页面)的URI中某个标志符的目标元素。具体来说,URI中的标志符通?;岚桓?rdquo;#”字符,然后后面带有一个标志符名称,比如#respond,target就是用来匹配ID为respond的元素的。

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

浏览器支持

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

如何使用:target

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

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

实例

让我们通过一个简单的例子来演示。比如我们在页面中常?;嵊玫絫ab,之前我们要用脚本来实现,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代码:

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

这里是个demo页面。

具体用法就是这么简单,在实际项目中大家就可以随意发挥了。

扩展阅读:

https://developer.mozilla.org/en/CSS/:target

//www.red-team-design.com/get-to-know-your-css3-target-pseudo-class

//css-tricks.com/css3-tabs/

原文://css9.net/t/142/snap/

  • 为什么说一直辛苦劳作的农民没有富起来?而不说一直勤劳的农民没有富起来? 2019-06-15
  • 刘红:关注乳腺健康 做好体检预防工作 2019-06-11
  • 中国伊斯兰教协会“四进”清真寺活动启动 2019-06-05
  • 我国社会组织正成为全球治理体系中的新生力量 2019-06-05
  • 林肯全新Navigator领航员正式上市 售112.80万元起 2019-05-27
  • “川商走进新经济”第一场活动落幕 2019-05-14
  • 还加上制裁伊朗引起价格飙升的石油战 2019-05-14
  • 青海:52个客运站卫生间将全面改造 2019-05-12
  • 依规治党和依法治国结合的典范 2019-05-12
  • 内蒙古水利厅厅长付万惠接受纪律审查和监察调查 2019-05-11
  • 传销就是利用这种劣根性。 2019-05-08
  • 女性之声——全国妇联 2019-04-22
  • 不忘初心继续前进——七集政论专题片 2019-04-21
  • 百姓故事:摔跤吧!女孩 2019-04-16
  • 一条塔里木河 串起南疆各色景致与无限风光 2019-04-16
  • 双色球中奖规则 天津快乐十分走势图的意思 广西11选5遗漏数据 微信金豆双色球 河北十一选五漏值 二分彩app 湖北快三预测推荐号 一码中特会员料公开版 河北时时彩开奖视频直播 赌场扑克 新疆25选7开奖号下载 广东省体育彩票中心地址 福州同城游戏十三水 北京pk10计划安卓 天津十一选五开奖结果查询结果