很多时候，我们想通过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" alt="" 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");
}