html三大样式选择器

2023年01月24日 15:33:28阅读数:65博客 / 追梦赤子 /

HTML三大选择器的使用

  1. <!DOCTYPE html>
  2. <html lang="en">
  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. /* 1.1 便签选择器 */
  11. dd {
  12. color: red;
  13. }
  14. /* 1.2 属性选择器 */
  15. /* .attr {
  16. color: lightcoral;
  17. } */
  18. dd[class=attr] {
  19. color: lightpink;
  20. }
  21. /* 2. 上下文选择器 */
  22. /* 2.1 父子 */
  23. .list > .item {
  24. border: thin solid;
  25. }
  26. /* 2.2 后代 */
  27. .list2 .item2 {
  28. color: red;
  29. }
  30. /* 2.3 兄弟(只选取第一个) */
  31. .list3 .item3.brother + .item3 {
  32. background-color: red;
  33. }
  34. /* 2.4 同级(除了当前元素的所有同级) */
  35. .list4 .item4.brother ~ .item4 {
  36. background-color: red;
  37. }
  38. /* 3. 结构伪类选择器 */
  39. /* 匹配第一个 */
  40. .order > :nth-child(0n + 1) {
  41. background-color: red;
  42. }
  43. /* 匹配第三个 */
  44. /* .order > :nth-child(0n + 3) {
  45. background-color: red;
  46. } */
  47. /* 0乘以任何数得0所以 0n+1 === 1 */
  48. /* .order > :nth-child(1) {
  49. background-color: blue;
  50. } */
  51. /* a = 1 匹配一组 */
  52. .order > :nth-child(1n +3) {
  53. background-color: red;
  54. }
  55. /* 只获取前三个 */
  56. /* a = -1:反向匹配 */
  57. .order > :nth-child(-n + 3) {
  58. background-color: yellow;
  59. }
  60. /* 2n 偶数位匹配 */
  61. .order > :nth-child(2n) {
  62. background-color: gray;
  63. }
  64. /* 2n+1 奇数匹配 */
  65. /* .order > :nth-child(2n + 1) {
  66. background-color: gray;
  67. } */
  68. /* 匹配首个 */
  69. .order > :first-child {
  70. background-color: blueviolet;
  71. }
  72. /* 匹配最后一个 */
  73. .order > :last-child {
  74. background-color: blueviolet;
  75. }
  76. /* 匹配倒数2个 */
  77. .order > :nth-last-child(-1n + 2) {
  78. background-color: orange;
  79. }
  80. /* 4.状态伪类选择器 */
  81. fieldset {
  82. display: inline-grid;
  83. gap : 1em;
  84. }
  85. /* 4.1 鼠标悬停 提交按钮变灰色*/
  86. /* 4.2 有效控件 */
  87. fieldset :enabled {
  88. border-radius: 5px;
  89. }
  90. /* 4.3 禁用控件 邀请码*/
  91. fieldset :disabled {
  92. background-color: brown;
  93. }
  94. /* 4.4 选中控件 记住我*/
  95. fieldset :checked + label {
  96. color: red;
  97. }
  98. /* 4.5 必选控件 用户名*/
  99. fieldset :required {
  100. border-color: red;
  101. }
  102. /* 4.6 焦点控件 */
  103. fieldset button:hover {
  104. cursor : pointer;
  105. background-color: beige;
  106. }
  107. </style>
  108. </head>
  109. <body>
  110. <section>
  111. <dl>
  112. <dt><h2>1. 基本选择器:</h2></dt>
  113. <dd>1.1 标签选择器</dd>
  114. <dd class="attr">1.2 属性选择器</dd>
  115. </dl>
  116. <h2>2. 上下文选择器:</h2>
  117. <h3>2.1 父子 ></h3>
  118. <ul class="list">
  119. <li class="item">itme1</li>
  120. <li class="item">itme2</li>
  121. <li class="item">itme3</li>
  122. <li class="item">itme4</li>
  123. </ul>
  124. <h3>2.2 后代 ' '(空格)</h3>
  125. <ul class="list2">
  126. <li class="item2">itme1</li>
  127. <li class="item2">
  128. itme2
  129. <ul>
  130. <li class="item">
  131. item2-1
  132. <ul>
  133. <li class="item">item2-1-1</li>
  134. <li class="item">item2-1-2</li>
  135. <li class="item">item2-1-3</li>
  136. </ul>
  137. </li>
  138. <li class="item">item2-2</li>
  139. <li class="item">item2-3</li>
  140. </ul>
  141. </li>
  142. <li class="item2">itme3</li>
  143. <li class="item2">itme4</li>
  144. </ul>
  145. <h3>2.3 兄弟 +</h3>
  146. <ul class="list3">
  147. <li class="item3 brother">itme1</li>
  148. <li class="item3">itme2</li>
  149. <li class="item3">itme3</li>
  150. <li class="item3">itme4</li>
  151. </ul>
  152. <h3>2.4 同级 ~</h3>
  153. <ul class="list4">
  154. <li class="item4 brother">itme1</li>
  155. <li class="item4">itme2</li>
  156. <li class="item4">itme3</li>
  157. <li class="item4">itme4</li>
  158. </ul>
  159. <h2>3. 结构伪类选择器:</h2>
  160. <ol class="order">
  161. <li class="item">item1</li>
  162. <li class="item">item2</li>
  163. <li class="item">item3</li>
  164. <li class="item">item4</li>
  165. <li class="item">item5</li>
  166. <li class="item">item6</li>
  167. </ol>
  168. <h2>4. 状态伪类选择器</h2>
  169. <fieldset>
  170. <legend>用户注册</legend>
  171. <input type="text" id="username" name="username" placeholder="用户名" required />
  172. <input type="email" id="email" name="email" placeholder="邮箱" />
  173. <input type="password" id="password" name="password" placeholder="密码" required />
  174. <input type="text" id="vcode" name="vcode" placeholder="邀请码" disabled />
  175. <section>
  176. <input type="checkbox" id="rem" name="remember" checked="checked" />
  177. <label for="rem">记住我</label>
  178. </section>
  179. <button type="button">提交</button>
  180. </fieldset>
  181. </section>
  182. </body>
  183. </html>

批改状态:合格

老师批语:完成的不错

版权申明:本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!

全部评论

文明上网理性发言,请遵守新闻评论服务协议

条评论
  • 博主信息
    追梦赤子
    博文
    7
    粉丝
    0
    评论
    0
    访问量
    432
    积分:0
    P豆:14