收藏
批改状态：合格
老师批语：
使用选择器代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.green{background-color: green;}
.bg-wheat {background-color: wheat;}
</style>
</head>
<body>
<form action="" method="post">
<fieldset>
<legend id="name">用户注册</legend>
<p class="name1">用户名:<input type="text" name="name" required></p>
<p>邮箱:<input type="email" name="email" required></p>
<p>密码:<input type="password" name="password1" required></p>
<p>确认密码:<input type="password" name="password2" required></p>
<p>性别:
<input type="radio" name="gender" value='male' checked>男
<input type="radio" name="gender" value='female'>女
</p>
<p>上传头像: <input type="file" name=""></p>
<p>Web语言:
<input type="checkbox" name="lang[]" value="javascript">JavaScript
<input type="checkbox" name="lang[]" value="php" checked>PHP
<input type="checkbox" name="lang[]" value="java">Java
<input type="checkbox" name="lang[]" value="python">Python
</p>
<p>级别:
<select>
<option value="0">小白</option>
<option value="1" selected>入门</option>
<option value="2">中级</option>
<option value="3">高级</option>
<option value="4">去火星吧</option>
</select>
</p>
<p>简介:<textarea cols="40" rows="5"></textarea></p>
<p><input type="hidden" name="userId" value="1010" disabled=""></p>
<p>
<button type="submit" name="submit">提交</button>
<button type="reset" name="reset">重填</button>
</p>
</fieldset>
</form>
</body>
</html>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$('form').css('text-align','center')
$('#name').css('color','red')
$('.name1').css('background-color','lightskyblue')
$('p:nth-child(8) ~ *').css('backgroundColor', 'pink')
$('p textarea').addClass('green')
$('p:eq(5)').addClass('green')
$('p:contains("邮箱")').addClass('bg-wheat')
</script>点击 "运行实例" 按钮查看在线实例
效果图：
总结：
选择器有很多。最常用的一定要熟悉。要用最简单的选择器达到选择的效果。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
