input:checked + dom

時間 2019-12-08

標籤 input checked dom 欄目 HTML 简体版

原文原文鏈接

input:checked ~ label ：相鄰同胞選擇器，選擇被選中的input標籤後全部的label標籤［input 和 label標籤有共同的父元素］；html

input:checked ＋ label ：相鄰同胞選擇器，選擇被選中的input標籤後第一個label標籤［input 和 label標籤有共同的父元素］；spa

<!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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。