:target 是 CSS3 中新增的一个伪类,用以匹配当前页面的 URI 中某个标志符的目标元素。简单来说,当前页面 URL 下添加 #news
就会定位到 id=“news”
的位置,使用 :target 伪类可以像 :hover 等伪类一样对目标元素定义样式。
W3C 上的用法示例:
See the Pen eNBZvB by leozhang (@leozhang) on CodePen.
Tab 标签切换效果如下:
See the Pen zGoOJP by leozhang (@leozhang) on CodePen.
实现的基本原理:
将 tab 内容框设置为绝对定位,然后通过 :target 伪类调整其 z-index 。