Html 带有突出显示复选框的CSS选择器问题_Html_Css_Css Selectors

Html 带有突出显示复选框的CSS选择器问题

html css

Html 带有突出显示复选框的CSS选择器问题,html,css,css-selectors,Html,Css,Css Selectors,当我把标签放在复选框之后时，这个CSS选择器工作 input[type=checkbox]:checked + label { color: red; } <input type="checkbox"><label>Checkbox1</label> 输入[类型=复选框]：选中+标签{ 颜色：红色； } 复选框1 但是我想在点击标签时选中复选框下面是更新的HTML的CSS label >

当我把标签放在复选框之后时，这个CSS选择器工作

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

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

输入[类型=复选框]：选中+标签{
颜色：红色；
}
复选框1

但是我想在点击标签时选中复选框

下面是更新的HTML的CSS

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

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

label>input[type=checkbox]：选中{
颜色：红色；
}
复选框1

我在这里做错了什么

下面是一个文件中的简化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>


选择器测试场
标签>输入[类型=复选框]：选中{
颜色：红色；
}


复选框1


复选框2


复选框3

单击标签时，必须使用“for”属性设置复选框，它不是选择器，是HTML属性并指向id，请参见下面的示例：（我只修改了第一个）

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

输入[类型=复选框]：选中+标签{
颜色：红色；
}




复选框1


复选框2


复选框3

在原始代码中，复选框和标签是独立的相邻元素

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


复选框标签

那么：active伪类如何？选择器的可能副本应该是

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

以便您的建议起作用。选择器与他插入的相同，但他忘记了标签上的内容，并试图获得相同的结果，将输入插入标签，只是这个=）你的html在那里做什么？它没有效果对不起，我只是从post=D复制粘贴所有html我看到了这个问题并发布了FastPost为什么你发布与我相同的内容？哦，还有。。。输入决不能在labet标记内。@JoëlBonetRodríguez在标签内使用输入不正确是不推荐的，在处理样式和ajax函数时会导致问题，必须在标签外才能正常运行。请注意，在您粘贴（链接）的示例中，有许多示例外部有输入，内部只有一个，但这只是一种结构。@Joël Bonet Rodríguez:这种做法从未被反对过。仅仅因为你不喜欢一种在标准中完全可以接受的方法并不意味着它是“不推荐的”。我从2k9开始就没有见过这种奇怪的做法。如果您愿意，可以继续这样做，但有时ajax函数会混合值并将其视为继承值，您将在几个小时内哭诉如何解决该问题。这是不同的标签，为了构造不同的项目，将p放入p是正确的吗？是的，但你可以做得很漂亮，在p中使用span，因为属性…嗯？哦，还有。。。您将在复选框和单选按钮上获得默认的cursor:pointer，因为标签是cursor:default；作为默认属性（根据文档，请参见w3c）。