表单和CSS选择器的案例

用户注册表单

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <title>用户注册表单</title>
  8. </head>
  9. <body>
  10. <h4>用户注册表单</h4>
  11. <form action="" method="POST">
  12. <fieldset>
  13. <legend>必填项</legend>
  14. <div>
  15. <label for="username">帐号:</label>
  16. <input
  17. type="text"
  18. id="username"
  19. name="username"
  20. autofocus
  21. required
  22. placeholder="不少于3位"
  23. />
  24. </div>
  25. <div>
  26. <label for="psw">密码:</label>
  27. <input type="password" id="password" name="password" required placeholder="不少于6位"/>
  28. </div>
  29. <div>
  30. <label for="male">性别:</label>
  31. <input type="radio" name="gender" value="male" id="male" checked/><label
  32. for=""
  33. ></label>
  34. <input type="radio" name="gender" value="female" /><label
  35. for=""
  36. ></label>
  37. <input type="radio" name="gender" value="serret" />保密<label
  38. for=""
  39. ></label>
  40. </div>
  41. <div>
  42. <label for="tal">电话:</label>
  43. <input type="text" id="tal" name="tal" required />
  44. </div>
  45. <div>
  46. <label for="email">邮箱:</label>
  47. <input type="email" id="email" name="email" required />
  48. </div>
  49. <div>
  50. <label for="">爱好:</label>
  51. <input type="checkbox" id="html" name="php[]" checked /><label
  52. for="html"
  53. >学习前端</label
  54. >
  55. <input type="checkbox" id="JavaaScript" name="php[]" /><label
  56. for="JavaScript"
  57. >学习PHP</label
  58. >
  59. <input type="checkbox" id="css" name="php[]" /><label for="css"
  60. >学习java</label
  61. >
  62. </div>
  63. <label>居住地址:</label>
  64. <select name="level1" id="">
  65. <option selected>请选择(省)</option>
  66. <option value="1">海南省</option>
  67. <option value="2">广东省</option>
  68. </select>
  69. <select name="level2" id="">
  70. <option selected>请选择(市)</option>
  71. <option value="11">海口市</option>
  72. <option value="12">广州市</option>
  73. </select>
  74. </div>
  75. <div>
  76. <input type="reset" name="reset" value="清除" />
  77. <button>提交</button>
  78. </div>
  79. </fieldset>
  80. </form>
  81. </body>
  82. </html>

基本选择器

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <title>基本选择器(标签和属性)</title>
  8. <style>
  9. li {
  10. background-color: blue;
  11. }
  12. li#one {
  13. background-color: chartreuse;
  14. }
  15. li.two {
  16. background-color: darkgreen;
  17. }
  18. </style>
  19. </head>
  20. <body>
  21. <!-- 基本选择器 -->
  22. <ul>
  23. <li id="one">item1</li>
  24. <li class="two">item2</li>
  25. <li>item3</li>
  26. <li>item4</li>
  27. </ul>
  28. </body>
  29. </html>

上下文选择器

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <title>上下文选择器</title>
  8. <style>
  9. /* 1. 后代选择器,子子孙小全选中 : 空格 */
  10. ul li {
  11. background-color: darkgreen;
  12. }
  13. /* * 2. 子选择器 大于号 , 只匹配子一级,不匹配孙子*/
  14. body > ul > li {
  15. background-color: darkorchid;
  16. }
  17. /* 3. 同级相邻选择器, 加号 + */
  18. .start1 + li {
  19. background-color: gold;
  20. }
  21. /* 4. 同级所有选择器, ~ 波浪线 */
  22. .start2 ~ li {
  23. background-color: maroon;
  24. }
  25. </style>
  26. </head>
  27. <body>
  28. <ul>
  29. <li>item1</li>
  30. <li>item2</li>
  31. <li>
  32. item3
  33. <ol>
  34. <li>item</li>
  35. <li>item</li>
  36. <li>item</li>
  37. </ol>
  38. </li>
  39. <li>item4</li>
  40. </ul>
  41. <hr />
  42. <ol>
  43. <li>item1</li>
  44. <li class="start1">item2</li>
  45. <!-- 同级相邻选择器 -->
  46. <li>item3</li>
  47. <li class="start2">item4</li>
  48. <!-- 同级所有选择器, -->
  49. <li>item5</li>
  50. <li>item6</li>
  51. </ol>
  52. </body>
  53. </html>