很多时候，我们想通过html+css的方式实现排列在后方的代码在选中状态下，能控制排列在前的代码的样式。那么要怎么实现呢？在这里我就要用1个小技巧来完成。
众所周知的，我们css中的选择器通常只能向下或者同级向下选中，而不能向上选中，这样就对于想控制前面样式的时候带来麻烦。input+label关联的方式即可实现，因为input和label是通过id值来进行关联的，而html中规定了，id值必须唯一，那么我将input放置在html的body下的任意位置，均可实现关联，所以为了实现后方代码控制前方代码，只需要将input放置到前方的代码之前就ok了。
下面我们举一个例子：我要实现电影院选座的时候，点击下方的1人，即选中1个座位，点击2人 即选中2个座位的效果。
在这里我选择单选框（input的type类型为radio）。 同时将input的代码放置到main标签下的最开始地方，而label可以放置在后面任意位置，都可以通过id进行关联。这样我在点击‘1人’等按钮的时候，即可选中所需座位。
html代码如下：
<main> ???????<div> ???????????<p>激光3号厅银幕</p> ???????</div> ???????<!-- 推荐选座的input框 --> ???????<input name="select" type="radio" id="people1"> ???????<input name="select" type="radio" id="people2"> ???????<input name="select" type="radio" id="people3"> ???????<input name="select" type="radio" id="people4"> ???????<input name="select" type="radio" id="people5"> ???????<!-- 选座区 --> ???????<section class="num"> ???????????<!-- 选座区座位 --> ???????????<div class="num_r"> ???????????????<!-- 一排 --> ???????????????<div class="num_r1"> ???????????????????<input type="checkbox" id="seat1_01"> ???????????????????<label for="seat1_01"> ???????????????????????<i></i> ???????????????????</label> ???????????????????<input type="checkbox" id="seat1_02"> ???????????????????<label for="seat1_02"> ???????????????????????<i></i> ???????????????????</label> ???????????????????<input type="checkbox" id="seat1_03"> ???????????????????<label for="seat1_03"> ???????????????????????<i></i> ???????????????????</label> ???????????????????<input type="checkbox" id="seat1_04"> ???????????????????<label for="seat1_04"> ???????????????????????<i></i> ???????????????????</label> ???????????????????<input type="checkbox" id="seat1_05"> ???????????????????<label for="seat1_05"> ???????????????????????<i></i> ???????????????????</label> ???????????????????<input type="checkbox" id="seat1_06"> ???????????????????<label for="seat1_06"> ???????????????????????<i></i> ???????????????????</label> ???????????????????<input type="checkbox" id="seat1_07"> ???????????????????<label for="seat1_07"> ???????????????????????<i></i> ???????????????????</label> ???????????????????<input type="checkbox" id="seat1_08"> ???????????????????<label for="seat1_08"> ???????????????????????<i></i> ???????????????????</label> ???????????????????<input type="checkbox" id="seat1_09"> ???????????????????<label for="seat1_09"> ???????????????????????<i></i> ???????????????????</label> ???????????????????<input type="checkbox" id="seat1_10"> ???????????????????<label for="seat1_10"> ???????????????????????<i></i> ???????????????????</label> ???????????????????<input type="checkbox" id="seat1_11"> ???????????????????<label for="seat1_11"> ???????????????????????<i></i> ???????????????????</label> ???????????????????<input type="checkbox" id="seat1_12"> ???????????????????<label for="seat1_12"> ???????????????????????<i></i> ???????????????????</label> ???????????????????<input type="checkbox" id="seat1_13"> ???????????????????<label for="seat1_13"> ???????????????????????<i></i> ???????????????????</label> ???????????????????<input type="checkbox" id="seat1_14"> ???????????????????<label for="seat1_14"> ???????????????????????<i></i> ???????????????????</label> ???????????????????<input type="checkbox" id="seat1_15"> ???????????????????<label for="seat1_15"> ???????????????????????<i></i> ???????????????????</label> ???????????????</div> ???????????????<!-- 二排 ??????后面除了id值不一样以为，其他差不多，故省略--> ???????????????<div class="num_r2"> ??????????????...... ?????????????????</div> ???????????</div> ???????????<p>银幕中央</p> ???????????<!-- logo背景 --> ????????????????<img src="../IMG/logo.png" ?class="logo"> ??????????</section> ???????<!-- 推荐选座 --> ???????<section class="recommend"> ???????????<p>推荐</p> ???????????<div> ???????????????<label for="people1"> ???????????????????<p>1人</p> ???????????????</label> ???????????????<label for="people2"> ???????????????????<p>2人</p> ???????????????</label> ???????????????<label for="people3"> ???????????????????<p>3人</p> ???????????????</label> ???????????????<label for="people4"> ???????????????????<p>4人</p> ???????????????</label> ???????????????<label for="people5"> ???????????????????<p>5人</p> ???????????????</label> ???????????</div> ???????</section> ???</main>
css代码如下：
main input{ ???display: none; ?}input[id="people1"]:checked~section label[for="seat7_07"]>i{ ???background-image: url("../IMG/Screenshot_2016-10-21-17-14-02_07.png");}input[id="people2"]:checked~section label[for="seat7_07"]>i,input[id="people2"]:checked~section label[for="seat7_08"]>i{ ???background-image: url("../IMG/Screenshot_2016-10-21-17-14-02_07.png");}input[id="people3"]:checked~section label[for="seat7_07"]>i,input[id="people3"]:checked~section label[for="seat7_08"]>i,input[id="people3"]:checked~section label[for="seat7_09"]>i{ ???background-image: url("../IMG/Screenshot_2016-10-21-17-14-02_07.png");}input[id="people4"]:checked~section label[for="seat7_07"]>i,input[id="people4"]:checked~section label[for="seat7_08"]>i,input[id="people4"]:checked~section label[for="seat7_09"]>i,input[id="people4"]:checked~section label[for="seat7_06"]>i{ ???background-image: url("../IMG/Screenshot_2016-10-21-17-14-02_07.png");}input[id="people5"]:checked~section label[for="seat7_07"]>i,input[id="people5"]:checked~section label[for="seat7_08"]>i,input[id="people5"]:checked~section label[for="seat7_09"]>i,input[id="people5"]:checked~section label[for="seat7_06"]>i,input[id="people5"]:checked~section label[for="seat7_05"]>i{ ???background-image: url("../IMG/Screenshot_2016-10-21-17-14-02_07.png");}
纯html+css中实现静态选座位效果技巧（input+label使用小技巧）
原文地址：https://www.cnblogs.com/zhangzhiyong/p/9652215.html