很多時候，我們想通過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");
}