CSS：使用兩個通用選擇器來選擇相同的元素

如何使用通用同級選擇相同的元素。這我需要嘗試複選框：檢查技術使用它作爲開關（一些實驗）。CSS：使用兩個通用選擇器來選擇相同的元素

input:checked:after{ 
 
//I wanted two psuedo class to work together 
 
//but this selector isnt valid 
 
    
 
    content:"text"; 
 
} 
 

 
//so i tried below 
 

 
input:checked ~ span ~ input:after{ 
 
    content:"text"; 
 

 
//but above isnt working either 
 
}

<input type="checkbox" checked><span></span>

來源

2016-07-14 Vetrivel

嘗試'輸入：檢查+跨度{}'樣式的''複選框時'checked'。 –

'::之後'::之前，兩個冒號。 –

對CSS的批註標記就像

/* Comment */

爲了讓你的CSS跑，我不得不刪除那些//標記，上面。我能夠得到這樣的代碼工作：

input[type='checkbox']:checked ~ span::after{ 
    content:'text'; 
}

與HTML：

<input type="checkbox" checked><span></span>

我的產量選中複選框與後詞「文本」。注意我需要僞元素雙冒號標記。它與「checked」使用的僞類冒號標記有點不同。

參考文獻： https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements https://www.w3.org/TR/css3-selectors/

來源

2016-07-14 18:42:23 gladiola

感謝評論部分// css行爲試圖達到的目標在這裏被誤解了。我想嘗試在這個URL中給出的東西https://css-tricks.com/the-checkbox-hack/ – Vetrivel

這個例子有另一個部分：輸入和它的標籤之間的關係。在這個例子中，複選框只是遠離視口。然而，標籤與它相關聯。當您進入演示頁面時，請注意標籤的另一個CSS聲明塊。這是一個重要的部分。 – gladiola

CSS：使用兩個通用選擇器來選擇相同的元素

回答

相關問題