CSS的常用的伪类选择器及其使用

        伪类选择器（Pseudo-classes）是CSS中用来选择元素的特定状态或行为的选择器。它们以冒号（:）开头，用于为那些处于特定状态的元素应用样式。下面是一些常见伪类选择器汇总：

1. :hover：当用户鼠标悬停在元素上时应用样式。

   a:hover {
       color: red;
   }
   

2. :active：当元素被激活（鼠标按下未释放）时应用样式。

   button:active {
       background-color: blue;
   }
   

3. :focus：当元素获得焦点时应用样式。

   input:focus {
       border-color: green;
   }
   

4. :visited：选择已访问链接的样式。

   a:visited {
       color: purple;
   }
   

5. :first-child：选择元素的第一个子元素。

   li:first-child {
       font-weight: bold;
   }
   

6. :last-child：选择元素的最后一个子元素。

   li:last-child {
       color: gray;
   }
   

7. :nth-child()：选择元素的指定位置的子元素。

   li:nth-child(odd) {
       background-color: lightgray;
   }
   

8. :not()：选择除了指定元素之外的所有元素。

   p:not(.special) {
       color: black;
   }
   

9. :nth-of-type()：选择指定类型的元素中的第几个元素。

   div:nth-of-type(3) {
       border: 1px solid red;
   }
   

10. :nth-last-child()：选择元素的倒数第几个子元素。

    li:nth-last-child(2) {
        color: blue;
    }
    

11. :first-of-type：选择同类型元素中的第一个元素。

    p:first-of-type {
        font-weight: bold;
    }
    

12. :last-of-type：选择同类型元素中的最后一个元素。

    span:last-of-type {
        text-decoration: underline;
    }
    

13. :nth-last-of-type()：选择同类型元素中的倒数第几个元素。

    div:nth-last-of-type(3) {
        background-color: lightblue;
    }
    

14. :empty：选择没有子元素的元素。

    p:empty {
        display: none;
    }
    

15. :target：选择当前活动的目标元素（通过锚点链接跳转到的元素）。

    #section1:target {
        background-color: yellow;
    }
    

16. :checked：选择被选中的表单元素（如复选框、单选框等）。

    input[type="checkbox"]:checked {
        border: 1px solid green;
    }
    

17. :enabled：选择可用的表单元素。

    input:enabled {
        background-color: lightgray;
    }