Question

当我在复选框之后放置标签时，此CSS选择器可以正常工作。

    input[type=checkbox]:checked + label {
        color: red;
    }

    <input type="checkbox"><label>Checkbox1</label>

但我也想在点击标签时检查复选框。

以下是更新后的HTML的CSS。

        label > input[type=checkbox]:checked {
            color: red;
        }

        <label><input type="checkbox">Checkbox1</label>

我在这里做错了什么？

以下是一个文件中的简化HTML和样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Selectors Test Ground</title>

    <style>
        label > input[type=checkbox]:checked {
            color: red;
        }
    </style>
</head>
<body>
    <form id="checkBoxForm">
        <ul>
            <li>
                <label><input type="checkbox">Checkbox1</label>
            </li>
            <li>
                <label><input type="checkbox">Checkbox2</label>
            </li>
            <li>
                <label><input type="checkbox">Checkbox3</label>
            </li>
        </ul>
    </form>
</body>

Answer 1

你必须使用＆＃34;用于＆＃34;在单击标签时选中要设置复选框的属性，它不是选择器，它的HTML属性并指向一个ID，请参阅下面的示例:(我只修改了第一个）。

已编辑：在代码段上添加了css（以及已删除的样式代码和从问题中复制的内容）

＆＃13;

input[type=checkbox]:checked + label {
        color: red;
    }

＆＃13;

    <form id="checkBoxForm">
        <ul>
            <li>
                <input id="chk1" type="checkbox"><label for="chk1">Checkbox1</label>
            </li>
            <li>
                <label><input type="checkbox">Checkbox2</label>
            </li>
            <li>
                <label><input type="checkbox">Checkbox3</label>
            </li>
        </ul>
    </form>

＆＃13;

并且您不得将标记设置为标签。

Answer 2

在原始代码中，复选框和标签是分开的相邻元素。

<input type="checkbox">
<label>Checkbox Label</label>

但是，标签与复选框无关。如果复选框是标签的子元素，则标签将与复选框相关联，如更新的代码中所示。

<label>
    <input type=“checkbox”>
    Checkbox Label
</label>

但是，这是您遇到问题的地方。现在，CSS不是在复选框旁边标注样式，而是在标签内设置复选框样式，而不是标签本身。

解决问题的最简单方法是将元素分开，并使用HTML属性将复选框链接到标签。

<input type="checkbox" id="1">
<label for="1">Checkbox Label</label>

CSS选择器问题突出显示复选框

2 个答案: