css3的伪类有哪些-猿码集

1. 伪类的概念

在了解伪类之前，我们先了解一下CSS选择器的概念。CSS选择器是CSS规则的一部分，用于选择要应用样式的 HTML 元素。伪类是CSS选择器的一个特殊类型，它可以向某些选择器添加特殊的效果。伪类用两个冒号（“::”）表示。


selector::pseudo-element {
  property:value;
}
selector:pseudo-class {
  property:value;
}

如果用一个选择器作为样式规则的开头，用伪类作为选择器后缀，那么就可以为该选择器匹配的元素设置特殊的样式。

2. 伪类的基本用法

2.1 :active

:active伪类可以匹配被用户激活（按下）的元素。


a:active {
  color: red;
}

以上代码可以使a标签在被用户激活（按下）后字体颜色变为红色。

2.2 :hover

:hover伪类可以匹配鼠标指针悬浮在其上的元素。


a:hover {
  text-decoration: underline;
}

以上代码可以使鼠标悬浮在a标签上时出现下划线。

2.3 :link

:link伪类可以匹配还未被访问的链接。


a:link {
  color: blue;
}

以上代码可以使未被访问的链接的字体颜色变为蓝色。

2.4 :visited

:visited伪类可以匹配已经被访问的链接。


a:visited {
  color: purple;
}

以上代码可以使已被访问的链接的字体颜色变为紫色。

2.5 :focus

:focus伪类可以匹配获得焦点的元素。


input:focus {
  border: 1px solid green;
}

以上代码可以使input获得焦点时出现1像素的绿色边框。

2.6 :nth-child()

:nth-child()伪类可以匹配某元素的第n个子元素。


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

以上代码可以选择第二个li元素并将其字体颜色变为红色。

2.7 :nth-of-type()

:nth-of-type()伪类可以匹配某元素的某种类型的第n个子元素。


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

以上代码可以选择第二个p标签并将其字体颜色变为蓝色。

2.8 :first-child

:first-child伪类可以匹配某元素的第一个子元素。


li:first-child {
  color: yellow;
}

以上代码可以选择第一个li元素并将其字体颜色变为黄色。

2.9 :last-child

:last-child伪类可以匹配某元素的最后一个子元素。


li:last-child {
  color: orange;
}

以上代码可以选择最后一个li元素并将其字体颜色变为橙色。

2.10 :not()

:not()伪类可以匹配除指定元素外的其他元素。


div:not(.special) {
  color: blue;
}

以上代码可以匹配除class为special的div元素以外的所有div元素并将其字体颜色变为蓝色。

2.11 :checked

:checked伪类可以匹配被选中的元素，通常用于单选框和复选框。


input:checked {
  background-color: yellow;
}

以上代码可以在单选框或复选框被选中时将其背景色变为黄色。

3. 总结

本文介绍了CSS3中的伪类，包括：:active、:hover、:link、:visited、:focus、:nth-child()、:nth-of-type()、:first-child、:last-child、:not()、:checked。使用伪类可以很方便的为某些元素添加特殊的效果，从而增强用户体验。

css3的伪类有哪些