css3---伪类和伪元素

 

E:target

DOM结构文档：

<a href="#div1">div1</a>
<a href="#div2">div2</a>
<a href="#div3">div3</a>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>

css清单：

 div{
            width:300px;
            height:200px;
            background-color: #000;
            font:50px/200px "微软雅黑";
            color:#fff;
            text-align:center;
            display: none;
        }
        div:target{
            display: block;
        }

 模拟选中效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
     label{
         float:left;
         margin:0 5px;
         overflow:hidden;
         position:relative;
     }
        label input{
            position:absolute;
            left:-50px;
            top:-50px;
        }
        span{
           float: left;
            width:50px;
            height:50px;
            border:3px solid #000;
        }
        input:checked~span{
            background-color: red;
        }
    </style>
</head>
<body>
<label>
    <input type="radio" name="tab"/>
    <span></span>
</label>
<label>
    <input type="radio" name="tab"/>
    <span></span>
</label>
</body>
</html>

 

posted @ 2018-01-18 15:37  千寻的天空之城  阅读(151)  评论(0)  编辑  收藏  举报