点击“为”两个锚标记和标签输入标签上

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

如果我添加“的”属性标签的目标定位标记，默认浏览器滚动的作品，但随后施加不定型：

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

DEMO anchor

现在，一个显而易见的问题：

我可以得到这两种行为在纯CSS中一起工作吗？

Answer 1

a中的input元素违反常识以及HTML5 CR。嵌套两个互动元素引发了点击鼠标时激活元素的问题。

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

Answer 2

由于Input：复选框位于<label>的内部，所以这不起作用。浏览器只需点击标签即可将注意力集中在输入上。