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 styling

如果我为标签添加属性'for'以定位锚标签，则默认浏览器滚动有效，但不再应用样式：

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

DEMO anchor

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

我可以将这两种行为在纯CSS中协同工作吗？

Answer 1

这不起作用，因为输入：复选框位于<label>的内部。浏览器会在点击标签时将注意力集中在输入上。

Answer 2

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

使用有效且合理的HTML标记，而不是这样的构造。然后请根据期望或预期的渲染与实际渲染来制定样式问题，而不是说“此”“不起作用”。

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

2 个答案: