點擊「爲」兩個錨標記和標籤輸入標籤上

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>的內部，所以這不起作用。瀏覽器只需點擊標籤即可將注意力集中在輸入上。