使用选择器代码:
实例
<!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>
运行实例 »
点击 "运行实例" 按钮查看在线实例
效果图:
总结:
选择器有很多。最常用的一定要熟悉。要用最简单的选择器达到选择的效果。