纯html+css中实现静态选座位效果技巧（input+label使用小技巧）

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

原文地址：https://www.cnblogs.com/zhangzhiyong/p/9652215.html