html - 我可以使用选择器来控制跨 div 的复选框吗？

Question

我有一个非常基本的复选框 hack，用于选择不同的元素。 它完全符合我的要求:即，单击标签允许我选择相应的图形:

input[type="checkbox"] { display:none; }

.wrap { width: 50%; }
.wrap label { display: inline-block;}

.checker {background: red; padding: 50px;}
.checker figure { margin: 10px; display: inline-block; position: relative;}

.wrap input { display: none; }
.wrap input:checked ~ .checker { display: none; }

.wrap input:checked + label { color: blue; }

.wrap #check1cont:checked ~ .check1 {display: inline-block;}
.wrap #check2cont:checked ~ .check2 {display: inline-block;}

<div class="wrap">
  

	<input type="checkbox" name="cont" id="check1cont">
	<label class="check1cont" for="check1cont">Check 1</label>

	<input type="checkbox" name="controllers" id="check2cont">
	<label class="check2cont" for="check2cont">Check 2</label>



<figure class="checker check1">CHECK 1</figure>

<figure class="checker check2">CHECK 2</figure>
  
</div>

但我希望 Controller /标签在左侧对齐，数字在右侧。理想情况下，我希望能够使用 flex 执行此操作，因此标签位于响应式、左对齐的 div 中。

我试过用不同的兄弟选择器和子选择器添加 div，但我对这一切都是陌生的，而且我认为我没有得到正确的组合(或者我做错了其他事情，否则不可能)。

有人可以推荐一种方法吗？

提前致谢。

Answer 1

隐藏复选框的技巧之所以有效，是因为复选框本身可以位于与标签相关的任何位置。因此，首先将复选框放在前面，然后将标签放在单独的容器中，然后您可以使用复选框的 :checked 状态来控制标签和图形。

.wrap { display:flex; width:50%; vertical-align:top;}
.wrap aside {vertical-align:top;}
.wrap label {white-space:nowrap; display: block;}

.checker {background: red; padding: 50px; vertical-align:top;}
.checker {margin: 10px; display: inline-block; position: relative;}

.wrap input { display: none; }
input:checked ~ main .checker { display: none; }

#check1cont:checked ~ aside .check1cont,
#check2cont:checked ~ aside .check2cont { color: blue; }

#check1cont:checked ~ main .check1,
#check2cont:checked ~ main .check2 {display: inline-block;}

<div class="wrap">

  <input type="checkbox" name="cont" id="check1cont">
  <input type="checkbox" name="controllers" id="check2cont">
  
  <aside>
    <label class="check1cont" for="check1cont">Check 1</label>
    <label class="check2cont" for="check2cont">Check 2</label>
  </aside>
  
  <main>
    <figure class="checker check1">CHECK 1</figure>
    <figure class="checker check2">CHECK 2</figure>
  </main>
</div>

注意:正如评论中所说，代码是对真实代码的简化，所以我不得不稍微清理一下 css。您可能必须取消清理它才能使其再次用于真实代码!