表单、iframe、元素样式来源优先级
1.表单
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>会员注册表</title></head><body><h3>会员注册表</h3><form action="" method="post"><!-- 帐号 --><label for="my-name">账号：</label><input type="text" id="my-name" name="my-name" placeholder="请输入您的账号" autofocus required><br><!-- 邮箱 --><label for="my-email">邮箱：</label><input type="email" id="my-email" name="my-email" placeholder="请输入您的邮箱" required><br><!-- 密码 --><label for="my-pwd">密码：</label><input type="password" name="my-pwd" id="my-pwd" placeholder="请输入您的密码" required><br><!-- 性别 --><label for="male">性别：</label><input type="radio" name="my-gender" id="male" checked><label for="male">男</label> <input type="radio" name="my-gender" id="female"><label for="female">女</label><br><!-- 爱好 --><!--! for 如何关联多个id --><label for="game">爱好</label><input type="checkbox" name="my-hobbies[]" id="game" checked><label for="game">游戏</label><input type="checkbox" name="my-hobbies[]" id="swim" checked><label for="game">游泳</label></label><input type="checkbox" name="my-hobbies[]" id="ball"><label for="game">打球</label><br><!-- 会员级别 --><label for="my-level">级别</label><select name="my-level" id="my-email"><option value="1">黑铁</option><option value="2" selected>黄铜</option><option value="3">白银</option><option value="4">黄金</option></select><br><!-- 简介 --><label for="my-brief">简介：</label><textarea name="my-brief" id="my-brief" cols="30" rows="10" placeholder="请简单的描述介绍一下您"></textarea><div><button>注册</button></div></form></body></html>
请问，
label标签的for元素怎么关联多个id,如上例默认复选项默认2个的情况下，如何做到1个for元素关联多个id?
2.iframe后台
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>后台框架</title></head><style>h3{background-color: aqua;height: 200px;overflow: hidden;}ul, iframe{float: left;}ul{width: 200px;background-color: rgb(42, 177, 71);}li{list-style: none;}iframe{border: 1px solid #000;width: 300px;height: 200px;}</style><body><!-- !注意：在label标签for属性关联的是目标的id，在使用iframe时，却是target的值与iframe里name的值对应 --><h3>后台管理系统</h3><hr><ul><li><a href="https://www.csdn.net/" target="my-backstage">CSDN</a></li><li><a href="https://www.163.com/" target="my-backstage">163</a></li><li><a href="https://www.sina.com.cn/" target="my-backstage">Sina</a></li></ul><!-- 后台主体内容显示界面 --><iframe src="" frameborder="0" name="my-backstage"></iframe></body></html>
注意：在
label标签for属性关联的是目标的id，在使用iframe时，却是target的值与iframe里name的值对应
3.元素样式来源与优先级
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>样式来源与优先级</title></head><body><!-- 默认样式，继承自html --><h1>我是中国人，我爱自己的祖国</h1><!-- 自定义样式，行内样式 style属性 --><h2 style="color: blue;">我的一小步，人类的一大步</h2><!-- 自定义样式，行内样式 style ，h3内容文字颜色为green --><div style="color: red;"><h3 style="color: green;">Hello World</h3></div><!-- 同名样式后面的覆盖前面的 --><style>h4{color: lightgreen; /*被后面color的样式覆盖*/color: lightcoral;}</style><h4>一屋不扫，何以扫天下</h4><!-- 外部样式 --><style>@import url('https://www.php.cn/static/layui/css/layui.css');</style><h5>天下兴亡，匹夫有责</h5></body></html>