纯css实现tab导航

仿照这个

实现了一个纯css的导航功能

html

<div class="main">
    <div id="contain1">列表一内容</div>
    <div id="contain2">列表二内容</div>
    <ul class="tab">
        <li><a href="#contain1">列表一</a></li>
        <li><a href="#contain2">列表二</a></li>
    </ul>
</div>

css

.main{
    position: absolute;
    left: 50%;
    top:30%;
    transform: translate(-50%,-50%); /*translate(x,y) 定义 2D 转换。*/
}
.tab {
    margin: 0;
    padding: 0;
    overflow: hidden;/*overflow 规定当内容溢出元素框时发生的事情。*/
    list-style-type: none;/*list-style-type 设置列表项标记的类型*/
}
 
.tab li {
    float: left;
}
 
.tab li a {
    text-decoration: none;/*text-decoration 添加到文本的装饰效果*/
    color: #000;
    background: #ddd;
    display: inline-block;
    width: 120px;
    height: 40px;
    text-align: center;
    line-height: 40px;
}
 
#contain1,
#contain2 {
    display: none;
    width:240px;
    height:100px;
    border:1px solid #ddd;
    position: absolute;
    top:40px;
    padding:10px;
    box-sizing: border-box;/*box-sizing 允许您以确切的方式定义适应某个区域的具体内容。*/
}

/*关键部分*/
/*:target 是 CSS3 新增的一个伪类，可用于选取当前活动的目标元素。
当 URL 末尾带有锚名称 #，就可以指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)。
它需要一个 id 去匹配文档中的 target 。*/
#contain1:target,
#contain2:target {
    display: block;
}

/*触发变色*/
/*兄弟选择符 ~*/
/*E~F{ cssRules } ，CSS3 兄弟选择符(E~F) ，选择 E 元素后面的所有兄弟元素 F*/
/*E~F 只能选择 E 元素 之后 的 F 元素，所以顺序就显得很重要了*/
/*CSS3 :nth-child() 选择器*/
/*:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。*/
/*n 可以是数字、关键词或公式。*/
#contain1:target ~ .tab li:nth-child(1) a{
    background:skyblue;
    color:#fff;
}
#contain2:target ~ .tab li:nth-child(2) a{
    background:skyblue;
    color:#fff;
}

https://www.cnblogs.com/bgwhite/p/9414282.html

https://www.jianshu.com/p/616774052c61

http://www.w3school.com.cn/cssref/index.asp

http://www.w3school.com.cn/cssref/selector_nth-child.asp