关键词：
很多时候，我们想通过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");
纯css3美化单选按钮radio
...样式的圆圈可以用CSS做出来，但是复选按钮checkbox的选中效果对勾就需要图片或者图标字体库3、不需要JS支持切换效果下图是最终效果图：HTML代码：<labelfor="man"class="radio">< 查看详情
纯css实现进度条效果
...实可以拆分一下： 一段背景； 一小段的静态的斜纹进度条； 斜纹进度条用线性渐变 linear-gradient类实现，原理很好理解，2个参数： 1、角度； 2、关键点（包含2个参数，1是... 查看详情
css中实现浮雕
主要是文本的阴影（text-shadow）技术实现的。具体实现的代码效果图： 查看详情
如何在html中实现图片的滚动效果
<MARQUEEonmouseover=stop()onmouseout=start()scrollAmount=3loop=infinitedeplay="0"><IMGsrc="第一张图片地址"><IMGsrc="第二张图片地址"></MARQUEE>注释：1)scrollAmount。它表示速度，值越大速度越快。2)加入onmouseover= 查看详情
vue中实现‘换肤/切换样式主题’功能的三种方式详解（干货）
参考技术AApp.vue：demo.vue（css）：demo.vue（html）：demo.vue（js）：效果：[图片上传失败...(image-c7afd3-1640662035396)]Public/css/theme_1.css：[图片上传失败...(image-e00dc1-1640661903141)]App.vue：demo.vue（html）：demo.vue（js）：效果：[图片上传失败...... 查看详情
纯css制作的图形效果
纯CSS制作的图形效果 很少会有人意识到，当浏览器绘制的border，会有一个角度的问题。我们就是得用这样的一个技巧来制作三角的效果。我们只需要保证一边的边框是有色，其他边框色为透明色，这样我们就很... 查看详情
纯html/css实现时钟效果
写了一个小Demo,用html,css渲染的时钟效果:Html代码:<!DOCTYPEhtml><html> <head> <metacharset="utf-8"/> <title>css实现时针</title> <linkrel="stylesheet"href=&quo 查看详情
纯css实现同一页面下选择之后更换内容效果
实现效果为如下：在同一页面下，当我选中输入手机号时，出现手机号输入框，当我选中输入验证码时，出现验证码输入框，当我选中设置密码时，出现密码框 在这里有一个小技巧，就是 1.对下面的输入框设置同样的样... 查看详情
vue中实现全选功能
<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>Vue测试实例-菜鸟教程(runoob.com)</title><scriptsrc="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> 查看详情
在 Swift 动画中实现 CSS
】在Swift动画中实现CSS【英文标题】：ImplementCSSintoSwiftAnimation【发布时间】：2020-06-2813:59:08【问题描述】：我有一个在HTML中用CSS编写的加载器。我想在我的iOS应用中实现完全相同的目标。这里是加载器的CSS。<!DOCTYPEhtml><htm... 查看详情
如何在 MVC 中实现 MultiSelect 下拉列表
】如何在MVC中实现MultiSelect下拉列表【英文标题】：HowtoimplementMultiSelectdropdownlistinMVC【发布时间】：2018-05-0412:08:52【问题描述】：我正在处理一个网页，我需要根据所选国家/地区为州创建和填充多选下拉列表。我正在使用这个plu... 查看详情
纯js和纯css+html制作的手风琴的效果
一：纯css+html的手风琴效果 这种用css写的手风琴比较简单，主要是应用到css中的，transition属性。 代码如下：<!DOCTYPEHTML><html><head><style>body{background:url(‘bg.gif‘)repeat;}ul,li,p 查看详情
纯css3实现不错的表单验证效果
...落实到实战中，利用HTML5表单与CSS3-UI实现一款不错的表单效果。效果可看下面动图：如效果演示 查看详情
小程序（网页）中实现页面截图
最近接到一个需求，需要在小程序中实现页面截图，我一开始的考虑是使用官方提供的扩展组件wxml-to-canvas，但是实际体验下来效果很糟糕，首先它并不能截取实际的页面，而是必须传入wxml和wxss；然后他能支持的效果也很少，... 查看详情
纯css3实现不错的表单验证效果
...落实到实战中，利用HTML5表单与CSS3-UI实现一款不错的表单效果。效果可看下面动图：如效果演示，我们今天就 查看详情
纯css3效果资源收集整理
...s-no-javascript纯CSS+HTML，不使用JavaScript，能实现怎样的视觉效果?这里收集整理了一些相关资源与工具，欢迎各位补充。GitHub地址，欢迎star~Resources基于单个Div的CSS绘图APureCSS3CyclingSlideshow纯CSS编写出可自动循环播放的Slideshow。用HTML... 查看详情
史上最全html和css布局技巧(代码片段)
...，下面介绍四种实现水平居中的方法（注：下面各个实例中实现的是child元素的对齐操作，child元素的父容器是parent元素）使用inline-block和text-align实现 .parenttext-align:center;.childdisplay:inline-block;&nb 查看详情
纯html加css的键盘ui效果图
先上效果图： 没有打字的功能，纯属是个界面图（一时无聊写的）代码如下：<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title>键盘ui</title></head><styletype="text/css">*{ma 查看详情