纯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代码如下：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<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代码如下：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
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");
}

　　

 

posted @   Grubber  阅读(3894)  评论(0)  编辑  收藏  举报
点击右上角即可分享
微信分享提示