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. </head>
  9. <body>
  10. <!-- 
  11. 伪类：
  12. 1.结构伪类：根据元素位置获取元素
  13. 2.状态伪类：根据状态来获取元素 -->
  15.     <ul class="list">
  16.         <li class="first">item1</li>
  17.         <li>item2</li>
  18.         <li>item3</li>
  19.         <li>item4</li>
  20.         <li>item5</li>
  21.         <li>item6</li>
  22.         <li>item7</li>
  23.         <li>item8</li>
  24.     </ul>
  26.     <style>
  27.         /* .list >:first-child{
  28.             background-color: red;
  29.         } */
  31.         /* .list >p:first-of-type{
  32.             background-color: yellow;
  33.         }
  35.         .list .first{
  36.             background-color: lightgreen;
  37.         } */
  40.         /* .list >li:nth-of-type(3){
  41.             background-color: lightblue;
  42.         } */
  44.         /* .list >li:nth-last-of-type(3){
  45.             background-color: lightblue;
  46.         } */
  49.         .list > :nth-of-type(2n){
  50.             background-color: lightblue;
  51.         }
  53.         .list > :nth-of-type(2n + 1){
  54.             background-color: red;
  55.         }
  57.         .list > :nth-of-type(2n + 1):hover{
  58.             background-color: white;
  59.         }
  64.     </style>
  67. </body>
  68. </html>