CSS伪类

了解CSS伪类的基础

伪类是预定义的关键字,用于根据元素选择元素状态,或定位到特定的孩子。

他们以单冒号 :

它们可以用作选择器的一部分,它们对于设置活动或访问链接的样式非常有用,例如,在悬停时更改样式,将焦点对准或定位到第一个子对象或奇数行。在许多情况下非常方便。

这些是您可能会使用的最流行的伪类:

伪类 目标
:active 用户正在激活的元素(例如,单击)。主要用于链接或按钮
:checked 启用的复选框,选项或单选输入类型
:default 一组选项中的默认值(例如,选择或单选按钮中的选项)
:disabled 禁用的元素
:empty 没有孩子的元素
:enabled 启用的元素(与:disabled
:first-child 一组兄弟姐妹的第一个孩子
:focus 有重点的元素
:hover 鼠标悬停的元素
:last-child 一群兄弟姐妹的最后一个孩子
:link 未被访问的链接
:not() 与传递的选择器不匹配的任何元素。例如:not(span)
:nth-child() 匹配指定位置的元素
:nth-last-child() 从头到尾匹配特定位置的元素
:only-child 没有任何兄弟姐妹的元素
:required 一个表单元素required属性集
:root 代表html元素。就像定位html,但更具体。有用的CSS变量
:target 与当前URL片段匹配的元素(用于页面中的内部导航)
:valid 成功验证客户端的表单元素
:visited 被访问的链接

让我们做一个例子。实际上,这是常见的一种。您需要设置链接的样式,因此可以创建CSS规则来定位a元素:

a {
  color: yellow;
}

一切正常,直到您单击一个链接。单击该链接后,链接将返回到预定义的颜色(蓝色)。然后,当您打开链接并返回页面时,现在链接为蓝色。

为什么会这样呢?

因为点击后的链接会更改状态,并进入:active状态。当它被访问时,它就在:visited状态。直到用户清除浏览历史记录为止。

因此,要使链接在所有状态下正确显示为黄色,您需要编写

a,
a:visited,
a:active {
  color: yellow;
}

:nth-child()特别值得一提。可用于针对具有:nth-child(odd):nth-child(even)

它通常用于列表中,以奇数行和偶数行不同的颜色:

ul:nth-child(odd) {
  color: white;
	background-color: black;
}

您还可以使用它来定位元素的前三个子元素:nth-child(-n+3)。或者,您可以每5个元素中的1个设置样式:nth-child(5n)

一些伪类仅用于打印,例如:first:left:right,因此您可以定位首页,所有左侧页面和所有右侧页面,这些页面的样式通常略有不同。

免费下载我的CSS手册


更多CSS教程: