Question

我有这种类型的HTML

<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>

当我检查标识为con-1的复选框时，我想隐藏ID为c1的div。我无法为此找到选择器。

PS：我无法更改我的html结构，也无法使用javascript或jQuery。

您可以在此处尝试实时代码：http://jsbin.com/xapaweqoju/edit?html,css,output

Answer 1

你不能通过使用css来做到这一点你必须改变你的html结构如果你想用css这样做，因为CSS还没有父选择器

Answer 2

唯一的方法是使用js或更改你的html：

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>

使用css隐藏父元素的兄弟

2 个答案: