菜单 学习猿地 - LMONKEY

VIP

开通学习猿地VIP

尊享10项VIP特权 持续新增

知识通关挑战

打卡带练!告别无效练习

接私单赚外块

VIP优先接,累计金额超百万

学习猿地私房课免费学

大厂实战课仅对VIP开放

你的一对一导师

每月可免费咨询大牛30次

领取更多软件工程师实用特权

入驻
148
0

css :target选择器怎么用?

原创
05/13 14:22
阅读数 906837

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)。

更多web前端开发知识,请查阅 HTML中文网 !!

发表评论

0/200
148 点赞
0 评论
收藏
为你推荐 换一批