16_伪元素.html 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  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>Document</title>
  7. <style>
  8. .box{
  9. color: red;
  10. }
  11. a:link{
  12. color: chartreuse;
  13. }
  14. a:visited{
  15. color: yellow;
  16. }
  17. a:hover{
  18. color: blue;
  19. font-size: 50px;
  20. }
  21. a:active{
  22. color: green;
  23. }
  24. .box:hover{
  25. background-color: blue;
  26. width: 100px;
  27. height: 100px;
  28. }
  29. /* li:first-child{
  30. color: red;
  31. }
  32. li:last-child{
  33. color: green;
  34. } */
  35. /* li:nth-child(2){
  36. color: chocolate;
  37. } */
  38. /* li:nth-child(odd){
  39. color: red;
  40. }
  41. li:nth-child(even){
  42. color: green;
  43. } */
  44. /* li:nth-child(2n+1){
  45. color: red;
  46. } */
  47. </style>
  48. </head>
  49. <body>
  50. <div class="box">hello</div>
  51. <a href="https://www.baidu.com">百度</a>
  52. <a href="https://www.google.com">谷歌</a>
  53. <ul>
  54. <li>项目一</li>
  55. <li>项目二</li>
  56. <li>项目三</li>
  57. <li>项目四</li>
  58. <li>项目五</li>
  59. <li>项目六</li>
  60. <li>项目七</li>
  61. <li>项目八</li>
  62. <li>项目九</li>
  63. <li>项目十</li>
  64. </ul>
  65. </body>
  66. </html>