input:checked + dom

input:checked ~ label   ：相邻同胞选择器，选择被选中的input标签后 所有的label标签［input  和 label标签有共同的父元素］；

input:checked ＋ label   ：相邻同胞选择器，选择被选中的input标签后 第一个label标签［input  和 label标签有共同的父元素］；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        img {
            display: none;
            width: 100px;
            height: 100px;
        }

        input:checked + img { 
            display: block;
        }

        input {
            position: absolute;
            left: -9999px;
        }

        label {
            cursor: pointer;
        }
    </style>
</head>
<body>
<div id="cont">
    <input id="img1" name="img" type="radio" checked="checked">
    <img src="a.jpg">
    <img src="b.jpg">
    <input id="img2" name="img" type="radio">
    <img src="b.jpg">
</div>
<div id="nav">
    <label for="img1">第一张</label>
    <label for="img2">第二张</label>
</div>
</body>
</html>

 

posted @ 2018-03-14 18:41  可恶の小郑  阅读(184)  评论(0)  编辑  收藏  举报