目标伪类选择器

目标伪类选择器 E：target，用来匹配页面的URL中某个标识符的目标元素。

例如：URL标签中通常含有一个井号（#）后面带有标识符名称，比如#div1，目标伪类选择器就是用来匹配ID为div1的元素

基于此功能，我们便可以使用目标伪类选择器完成一个简单的纯CSS tab切换，代码如下

布局效果：

   <div class="father">
        <ul>
            <li><a href="#div1">tab1</a></li>
            <li><a href="#div2">tab2</a></li>
            <li><a href="#div3">tab2</a></li>
        </ul>
        <div class="tab" id="div1">
            元素1
        </div>
        <div class="tab" id="div2">
            元素2
        </div>
        <div class="tab" id="div3">
            元素3
        </div>
    </div>

样式代码：

      ul li {
            float: left;
            list-style: none;
        }

        .father {
            height: 280px;
            position: relative;
        }

        a {
            text-decoration: none;
            color: #333;
            display: block;
            width: 40px;
            height: 30px;
            background-color: aqua;
            margin-left: 2px;
        }

        a:hover {
            background-color: antiquewhite;
        }

        a:target {
            z-index: 1;
        }

        .tab {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 300px;
            height: 250px;
            background-color: aliceblue;
        }

        .tab:target {
            z-index: 1;
        }

实现效果：