实例
<!DOCTYPE html>
<html lang="zh-CN">
<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>
<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>
<div id="verse">
<article>
<span>书山有路勤为径，学海无涯苦做舟</span>
</article>
</div>
<form action="" method="get">
<fieldset>
<legend>必填项</legend>
<div>
<label for="username" id="username">账号：</label>
<input type="text" name="username" autofocus required placeholder="首位必须为字母"/>
</div>
<div>
<label for="password">密码：</label>
<input type="password" name="password" id="password" requierd placeholder="6-12位大小写字母加数字"/>
</div>
<div>
<label for="email">邮箱：</label>
<input type="email" name="email" id="email" required placeholder="chao@ccdhs.cn"/>
</div>
<div>
<label for="secret" class="gender">性别</label>
<input type="radio" name="gender" value="male" /><label for="" class="gender">男</label>
<input type="radio" name="gender" value="female" /><label for="" class="gender">女</label>
<input type="radio" name="gender" value="secret" checked id="secret" /><label for="" class="gender">保密</label>
</div>
<div>
<label for="">爱好</label>
<input type="checkbox" name="hobby[]" value="read" /><label id="read">看书</label>
<input type="checkbox" name="hobby[]" value="run"/><label id="run">跑步</label>
<input type="checkbox" name="hobby[]" value="shopping" /><label id="shopping">购物</label>
<input type="checkbox" name="hobby[]" value="joking" checked /><label id="joking">撸代码</label>
</div>
<div>
<label for="">可胜任岗位</label>
<input type="checkbox" name="work[]" value="god" checked/><label id="god">扫地僧</label>
<input type="checkbox" name="work[]" value="gun"/><label id="gun">枪神</label>
<input type="checkbox" name="work[]" value="pig" /><label id="pig">猪</label>
<input type="checkbox" name="work[]" value="php" checked /><label id="php">php工程师</label>
</div>
<div>
<label for="">会员等级</label>
<select name="level" id="level">
<option value="1">铜牌会员</option>
<option value="2">银牌会员</option>
<option value="3">金牌会员</option>
<option value="4" selected>钻石会员</option>
</select>
</div>
<div>
<label for="">搜索关键字</label>
<input type="search" name="search" id="search" list="keywords">
<datalist id="keywords">
<option value="html">html</option>;
<option value="css">css</option>;
<option value="javascript">javascript</option>;
<option value="php">php</option>;
</datalist>
</div>
<div>
<input type="submit" value="提交">
</div>
</fieldset>
</form>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
总结：
使用子选择器">"时，是可以无限往下查找子元素的，且其中的内容可以是元素、id、class等
使用同级相邻选择器"+"时，需要注意：
一，+前面的元素需要唯一，如果不是唯一，首先会默认选中所有的符合+前面的所有元素，然后全部执行+后面符合条件的情况；
二：+后面的元素标签必须是+前面元素的下一级相邻元素的标签，否则将会无效