CSS3伪类怎么使用

CSS3伪类用于定义元素的特殊状态，它们通常用于样式化元素的特定部分，比如链接的不同状态、表单元素的不同状态等。伪类以冒号 : 开头。以下是一些常用的CSS3伪类及其用法：

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

   a:hover {
     color: blue;
   }
   

2. :focus - 当元素获得焦点时应用样式（例如，通过点击或键盘导航）。

   input:focus {
     border: 2px solid blue;
   }
   

3. :active - 当元素被激活（例如，在点击时）应用样式。

   button:active {
     background-color: red;
   }
   

4. :visited - 当链接被访问过后应用样式。

   a:visited {
     color: purple;
   }
   

5. :link - 对未访问的链接应用样式。

   a:link {
     color: black;
   }
   

6. :nth-child() - 选择父元素的特定子元素。

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

7. :first-child - 选择父元素的第一个子元素。

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

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

   li:last-child {
     font-style: italic;
   }
   

9. :nth-of-type() - 选择父元素的特定类型的子元素。

   p:nth-of-type(2) {
     color: green;
   }
   

10. :empty - 选择没有子元素（包括文本节点）的元素。

    div:empty {
      background-color: yellow;
    }
    

11. :target - 当URL的片段标识符匹配元素的ID时应用样式。

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

12. :disabled 和 :enabled - 分别选择禁用和启用的表单元素。

    input:disabled {
      background-color: #e0e0e0;
    }
    input:enabled {
      background-color: white;
    }
    

13. :checked - 选择被选中的表单元素，如复选框或单选按钮。

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

14. ::before 和 ::after - 在元素的内容之前或之后插入内容。

    p::before {
      content: "Note: ";
      font-weight: bold;
    }
    

15. ::placeholder - 选择输入框的占位符文本。

    input::placeholder {
      color: gray;
    }
    

这些只是CSS3伪类的一部分，还有更多的伪类可以用来创建复杂的样式规则。使用伪类可以让你的网页更加动态和交互式，同时保持HTML结构的简洁。