CSS的:target
选择器用于选择当前活动的目标元素。当页面上的一个链接被点击,并且该链接指向一个页面内的元素(通过ID)时,被链接的元素就会成为目标元素,此时:target
选择器就可以用来选择并应用样式到这个元素上。
这种选择器常常与页面内的导航(如Tab导航、折叠面板等)和“返回顶部”功能一起使用。
下面是一个简单的例子,展示了如何使用:target
选择器来创建一个基本的Tab导航:
HTML:
<nav> <a href="#tab1">Tab 1</a> <a href="#tab2">Tab 2</a> <a href="#tab3">Tab 3</a> </nav> <div id="tab1" class="tab-content">Content for Tab 1</div> <div id="tab2" class="tab-content">Content for Tab 2</div> <div id="tab3" class="tab-content">Content for Tab 3</div>
CSS:
..tab-content { display: none; /* 默认隐藏所有tab内容 */ } .tab-content:target { display: block; /* 当tab内容被选中时,显示该内容 */ }
在这个例子中,所有的.tab-content
元素默认都是隐藏的。但是,当用户点击一个链接(如#tab2
)时,对应的div
(即id="tab2"
的元素)就会被选中,并且:target
选择器会将其display
属性设置为block
,从而显示该元素的内容。
注意,:target
选择器只影响URL中当前的目标元素。如果用户刷新页面或者导航到另一个页面,然后再回来,之前的选中状态将不会保留,除非使用JavaScript或其他技术来保持状态。