CSS伪类是一种用于选择HTML元素的特殊选择器,它们允许你选择不在文档树中的状态或位置上的元素。以下是一些常见的CSS伪类:

1. :hover - 当用户鼠标悬停在元素上时应用样式。
   a:hover {
     color: red;
   }

2. :active - 当元素被激活(例如,按钮被点击)时应用样式。
   button:active {
     background-color: yellow;
   }

3. :focus - 当元素获得焦点时应用样式,通常用于表单元素。
   input:focus {
     border: 2px solid blue;
   }

4. :nth-child(n) - 选择父元素下的第n个子元素。
   li:nth-child(odd) {
     background-color: #f2f2f2;
   }

5. :first-child - 选择父元素下的第一个子元素。
   p:first-child {
     font-weight: bold;
   }

6. :last-child - 选择父元素下的最后一个子元素。
   div:last-child {
     margin-bottom: 0;
   }

7. :nth-of-type(n) - 选择同类型的元素中的第n个。
   h2:nth-of-type(2) {
     color: red;
   }

8. :not(selector) - 选择不符合指定选择器的元素。
   input:not([type="text"]) {
     opacity: 0.5;
   }

这只是一些伪类的例子,CSS还有许多其他伪类可用于不同的情况。伪类在制作响应式设计和增强用户体验方面非常有用。


转载请注明出处:http://www.zyzy.cn/article/detail/12540/CSS