隱藏父元素兄弟用css

我有一些這種類型的HTML隱藏父元素兄弟用css

<div class='box'> 
    <input type="checkbox" id="c1"> 
    <label for="c1">Check me to hide</label> 
</div> 
<div id='con-1'>Div to hide when checked</div>

而且我想隱藏我的div id爲con-1當ID c1複選框被選中。我無法爲此找到選擇器。

PS：我無法更改我的html結構，也無法使用JavaScript或jQuery。

您可以嘗試住代碼在這裏：http://jsbin.com/xapaweqoju/edit?html,css,output

來源

2015-11-13 hemkaran_raghav

它不是poss純CSS的純粹。你必須使用JavaScript或jQuery。 – Alex

純粹的CSS不可能。 –

好吧，我會檢查然後，我可以改變。 –

-1

的唯一方法是用JS或更改HTML這樣的：通過使用CSS

input[type=checkbox]:checked ~ #con-1 { 
 
    display: none; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
<div class='box'> 
 
    <input type="checkbox" id="c1"> 
 
    <label for="1">Check me to hide</label> 
 
    <div id='con-1'>Div to hide when checked</div> 
 
</div> 
 
</body> 
 
</html>

來源

2015-11-13 08:57:44 przemoo83

'PS：我無法更改我的html結構，也無法使用javascript或jQuery.有足夠的其他解決方案，例如JS ...但沒有符合要求的... –

你不能做到這一點你必須改變你的HTML結構，如果你想這樣做使用CSS，因爲CSS沒有父選擇器

來源

2015-11-13 09:05:53

隱藏父元素兄弟用css

回答

相關問題