html - CSS ">"选择器不起作用， "~"也不起作用

Question

我有以下 CSS:

.images_container input[type="checkbox"]:checked > label { border-color:#4378c3; opacity:1.0; }
.images_container input[type="checkbox"] > label:hover { opacity:1.0; }
.images_container input[type="checkbox"] { display:block; }

这是我的 HTML

<div class="sale_image_container">
    <input type="checkbox" id="<?=$result_id?>_checkbox" value="<?=$result_id?>" name="product[]" />
    <div style="display:table-cell; vertical-align:bottom;" />
        <label style="background-image:url(<?=$img?>)" class="sale_image" for="<?=$result_id?>_checkbox">
            <div class="jpg_name_bg">
                <div class="jpg"><?=$result_jpg?></div>
                <img src="images/expand.png" onClick="expandImage('<?=$img?>')" />
                <img src="images/fx.png" onClick="applyEffects('<?=$result_jpg?>')" />
            </div>
        </label>
    </div>
</div>

出于某种原因，前两种样式根本不起作用...选中复选框后，标签应该应用该样式...

Answer 1

input[type="checkbox"] > label:hover 表示 label 是 input 和 type 的直接子代=复选框。这不是您的 HTML 的样子。这根本不可能，因为 input 不能有任何 child 。

您可以尝试使用 + 获取 input 旁边的 div，然后使用 > 获取 标签:

.images_container input[type="checkbox"] + div > label:hover { opacity:1.0; }