Blogger Information
Blog 31
fans 2
comment 0
visits 27692
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
结构伪类选择器:分组
霏梦
Original
608 people have browsed it

- 作者:霏梦

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <title>结构伪类选择器:分组(不区分元素类型)</title>
  7. <style>
  8. /* 分组结构伪类分二步 */
  9. /* 元素按组分 */
  10. /* 在分组中根据索引进行选择、 */
  11. .h3-title span:last-of-type {
  12. background-color: rebeccapurple;
  13. }
  14. /* 在分组中匹配任何一个 */
  15. .h3-title span:nth-of-type(3) {
  16. font-size: 40px;
  17. }
  18. /* 前3个 */
  19. .h3-title span:nth-of-type(-n + 3) {
  20. color: red;
  21. }
  22. /* 最后三个 */
  23. .h3-title span:nth-last-of-type(-n + 3) {
  24. color: blue;
  25. }
  26. </style>
  27. </head>
  28. <body>
  29. <div class="h3-title">
  30. <div class="wsp">我是第1行</div>
  31. <div class="wsp">我是第2行</div>
  32. <div class="wsp">我是第3行</div>
  33. <span class="wsp">我是第4行</span>
  34. <span class="wsp">我是第5行</span>
  35. <span class="wsp">我是第6行</span>
  36. <span class="wsp">我是第7行</span>
  37. <span class="wsp">我是第8行</span>
  38. <span class="wsp">我是第9行</span>
  39. </div>
  40. </body>
  41. </html>
Correcting teacher:WJWJ

Correction status:qualified

Teacher's comments:写的不错,下次一天的作业合在一块写!
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post