CSS选项卡

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS选项卡</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body{
            background: #83B76B;
        }
        #main{
            width:800px;
            height: 400px;
            margin:50px auto;
        }
        #con{
            width:700px;
            height: 300px;
            margin: 30px auto;
            color: #fff;
        }
        input{
            display: none;
        }
        label{
            width:100px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            background: #6A9E52;
            display: inline-block;

        }
        label:nth-of-type(1){
            margin-left: 50px;
        }
        #con .text{
            background-color: #376B1F;
            text-indent: 2em;
            line-height: 40px;
            display: none;
        }
        input:checked+label{ /*input被选中 找到后面的labal*/
            background-color: #376B1F;
        }
        /*第一个input被选中，找到后面的div名字text的第一个元素*/
        input:checked:nth-of-type(1)~div.text:nth-of-type(1){
            display: block !important;
        }
        /*第二个input被选中，找到后面的div名字text的第二个元素*/
        input:checked:nth-of-type(2)~div.text:nth-of-type(2){
            display: block !important;
        }
    </style>
</head>
<body>
    <div id="main">
        <h1>CSS选项卡</h1>
        <div id="con">
            <input type="radio" name="radio" id="radio1" checked>
            <label for="radio1">选项卡1</label>
            <input type="radio" name="radio" id="radio2">
            <label for="radio2">选项卡2</label>
            <div class="text">
                四月，醉一场青春的流年。慢步在四月的春光里，走走停停，看花开嫣然，看春雨绵绵，感受春风拂面，春天，就是青春的流年。青春，是人生中最美的风景。青春，是一场花开的遇见；青春，是一场痛并快乐着的旅行；青春，是一场轰轰烈烈的比赛；青春，是一场鲜衣奴马的争荣岁月；青春，是一场风花雪月的光阴。
            </div>
            <div class="text">
                青春往事，多么甜蜜；青春岁月，多么靓丽；青春流年，如火如荼。青春里，我们向着梦想前进。跌倒过，伤心过，快乐过，痛苦过，孤独过，彷徨过，迷茫过。总是，在悠悠的岁月中徘徊；总是，在如春的生命中成长；总是，在季节的交替中感悟人生四季的美妙与韵律；总是，在多愁善感中体悟青春的美好与无奈。
            </div>
        </div>
    </div>
</body>
</html>