本文摘自PHP中文网,作者藏色散人,侵删。
css target是指“:target”选择器,可用于选取当前活动的目标元素,其使用语法如“#tab:target {color:blue}”,该语句表示改变锚链接指向“#tab”的元素字体颜色为蓝色。
本教程操作环境:windows7系统、css3版、thinkpad t480电脑。
推荐:《css视频教程》
css :target选择器
URL 带有后面跟有锚名称 #,指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)。
:target 选择器可用于选取当前活动的目标元素。
CSS3 :target伪类用来改变页面中锚链接URL所指向的ID元素的样式。【相关推荐:css在线手册】
例如你要改变描链接指向#tab的元素字体颜色为蓝色,哪么你可以这样写成:
1 |
|
浏览器支持:
不支持IE8及以下的IE版本,IE9支持这个属性,其它非IE内核浏览器如:Firefox、Chrome、等这些浏览器都支持。
用法:
:target伪类与:hover、:link、:visited、:focus等伪类的用法一样
1 |
|
实例:CSS3 :target伪类实现Tab切换效果
下面简单介绍下如何用csse :target来制作一个无JavaScript的tab切换效果
HTML代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
|
CSS代码:
1 2 3 4 5 6 |
|
原理其实很简单,就是把tab元素设为绝对对定位absolute,再通过:target伪类改变它们的层级(z-index)。
以上就是css target怎么用的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
更多相关阅读请进入《css》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者