单击标签'for'锚标记和输入标记

Question

我无法完成这项工作，看起来不可能，这就是我为什么要问。。。

这是使用的CSS：

label.btn {
    cursor:pointer;
    display:inline-block;
}
label.btn>input[type=checkbox] {
    display:none;
}
label.btn>input[type=checkbox]:checked~b {
    background:red;
}
/* not relevant, just for testing purpose */
#divtest { 
    margin-top:1500px
}

以下HTML代码将检查输入，然后应用<b>标记的样式：

<a href="#divtest" id="anchor">
    <label class="btn">
        <input type="checkbox"/><b>Click should scroll to '#divetest' element and check input for styling!</b>
    </label>
</a>

DEMO造型

如果我将属性"for"添加到标签以定位锚标记，默认的浏览器滚动可以工作，但不再应用样式：

<label class="btn" for="anchor">

DEMO锚点

现在，显而易见的问题是：

我能让这两种行为在纯CSS中协同工作吗

Answer 1

a中的input元素违反常识以及HTML5CR。嵌套两个交互式元素会引发鼠标单击时激活哪个元素的问题。

使用有效且合理的HTML标记来代替这种构造。然后，请根据所需或预期的渲染与实际渲染来表述样式问题，而不是说"这个"不起作用"。

Answer 2

这将不起作用，因为Input:复选框位于<label>内部。单击标签后，浏览器会将焦点设置在输入上。