尝试用css各类选择器添加样式制作一个注册表单

实例

<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"/><metahttp-equiv="X-UA-Compatible"content="IE=edge"/><metaname="viewport"content="width=device-width,initial-scale=1.0"/><title>用户注册界面</title><style>h1{color:violet;}fieldset{background-color:lightgreen;}legend{color:tomato;}input[type="submit"]{width:100%;}#username{font-weight:bolder;color:blueviolet}.gender{font-size:20px;color:brown;}#read~label{font-size:16px;font-weight:bolder;}body>#verse>article>span{color:red;}input[value="pig"]+label{font-size:26px;font-weight:bolder;}</style></head><body><h1>用户注册界面</h1><divid="verse"><article><span>书山有路勤为径，学海无涯苦做舟</span></article></div><formaction=""method="get"><fieldset><legend>必填项</legend><div><labelfor="username"id="username">账号：</label><inputtype="text"name="username"autofocusrequiredplaceholder="首位必须为字母"/></div><div><labelfor="password">密码：</label><inputtype="password"name="password"id="password"requierdplaceholder="6-12位大小写字母加数字"/></div><div><labelfor="email">邮箱：</label><inputtype="email"name="email"id="email"requiredplaceholder="chao@ccdhs.cn"/></div><div><labelfor="secret"class="gender">性别</label><inputtype="radio"name="gender"value="male"/><labelfor=""class="gender">男</label><inputtype="radio"name="gender"value="female"/><labelfor=""class="gender">女</label><inputtype="radio"name="gender"value="secret"checkedid="secret"/><labelfor=""class="gender">保密</label></div><div><labelfor="">爱好</label><inputtype="checkbox"name="hobby[]"value="read"/><labelid="read">看书</label><inputtype="checkbox"name="hobby[]"value="run"/><labelid="run">跑步</label><inputtype="checkbox"name="hobby[]"value="shopping"/><labelid="shopping">购物</label><inputtype="checkbox"name="hobby[]"value="joking"checked/><labelid="joking">撸代码</label></div><div><labelfor="">可胜任岗位</label><inputtype="checkbox"name="work[]"value="god"checked/><labelid="god">扫地僧</label><inputtype="checkbox"name="work[]"value="gun"/><labelid="gun">枪神</label><inputtype="checkbox"name="work[]"value="pig"/><labelid="pig">猪</label><inputtype="checkbox"name="work[]"value="php"checked/><labelid="php">php工程师</label></div><div><labelfor="">会员等级</label><selectname="level"id="level"><optionvalue="1">铜牌会员</option><optionvalue="2">银牌会员</option><optionvalue="3">金牌会员</option><optionvalue="4"selected>钻石会员</option></select></div><div><labelfor="">搜索关键字</label><inputtype="search"name="search"id="search"list="keywords"><datalistid="keywords"><optionvalue="html">html</option>;<optionvalue="css">css</option>;<optionvalue="javascript">javascript</option>;<optionvalue="php">php</option>;</datalist></div><div><inputtype="submit"value="提交"></div></fieldset></form></body></html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

总结：

使用子选择器">"时，是可以无限往下查找子元素的，且其中的内容可以是元素、id、class等

使用同级相邻选择器"+"时，需要注意：

一，+前面的元素需要唯一，如果不是唯一，首先会默认选中所有的符合+前面的所有元素，然后全部执行+后面符合条件的情况；

二：+后面的元素标签必须是+前面元素的下一级相邻元素的标签，否则将会无效

实例

总结：

更多相关文章

随机推荐