css 选座,纯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代码如下：

激光3号厅银幕

......

银幕中央

推荐

1人

2人

3人

4人

5人

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");

}