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的元素字体颜色为蓝色，哪么你可以这样写成：
#tab:target {color:blue}浏览器支持：
不支持IE8及以下的IE版本，IE9支持这个属性，其它非IE内核浏览器如：Firefox、Chrome、等这些浏览器都支持。
用法：
:target伪类与:hover、:link、:visited、:focus等伪类的用法一样
:target {color:blue}实例：CSS3 :target伪类实现Tab切换效果
下面简单介绍下如何用csse :target来制作一个无JavaScript的tab切换效果
HTML代码：
<div class="tablist"> <ul class="tabmenu"> <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">tab1 content</div> <div id="tab2" class="tab_content">tab2 content</div> <div id="tab3" class="tab_content">tab3 content</div> </div>
CSS代码：
.tab_content {
position: absolute;
}
#tab1:target, #tab2:target, #tab3:target {
z-index: 1;
}原理其实很简单，就是把tab元素设为绝对对定位absolute,再通过:target伪类改变它们的层级（z-index）。
以上就是css target怎么用的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
263
收藏
