<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><div style="width: 100%"><h3>用户注册</h3><form action="" method="GET"><fieldset><legend>必填项</legend><div><label for="username">账号</label><input type="text" id="username" autofocus="" required="" placeholder="请填写6-8位的数字和字母组合"/></div><div><label for="psw">密码</label><input type="password" id="psw"/><!--<button type="button" onclick="document.querySelector('#psw').type='text'">显示密码</button>--><label for="psw2">重复密码</label><input type="password" id="psw2"/></div><div>性别<label><input type="radio" name="sex" value="男"/>男</label><label><input type="radio" name="sex" value="女"/>女</label></div><div><label for="mobile">手机</label><input type="text" placeholder="请填写11位数的手机号码"/></div><div><label for="email">邮箱:</label><input type="email" id="email" name="email" required="" placeholder="exp@test.com"/></div></fieldset><div><label>爱好:</label><input type="checkbox" name="hobby[]" id="game" checked=""/><label for="game">游戏</label><input type="checkbox" name="hobby[]" id="trave"/><label>看电影</label><input type="checkbox" name="hobby[]" id="read"/><label>读书</label></div><div><select name="level" id=""><option value="1">个人会员</option><option value="2" selected="">企业会员</option></select></div><button>提交</button></form></div><!-- CSS基本选择器和上下文选择器 --><style>/* 基本选择器 */ li#fooder{ background-color: brown; } li.off{ background-color: #ccc;} /* 上下文选择器 */ /* 匹配所有,全部选中 */ ul li{ background-color: blue; } /* 只匹配一级li,二级三级不匹配 */ body>ul>li{ background-color: lawngreen; } /* 选择当前行li的下一行li */ .off +li{ background-color: yellow; } /* 选择当前行下面的所有li */ .off~li{ background-color: yellowgreen; }</style><ul><li id="fooder">item1</li><li class="off">item2</li><li>item3</li><li>item4</li><li>item5</li><li>item6</li><li>item7</li><li>item8<ul><li>item8-1</li><li>item8-2</li><li>item8-3</li><li>item8-4</li></ul></li></ul><!--!doctype-->