如何使用CSS的伪类
CSS的伪类用于向某些选择器添加特殊的效果,最常用的便是向超链接中添加样式,如颜色,字体大小,粗细等。使用标签选择器同样可以设置超链接的样式,但是加入了伪类可以让超链接在操作过程中展示不同的效果。
操作方法
- 01
在伪类的使用过程中,锚伪类是应用最为广泛的,链接的不同状态都可以用伪类以不同的方式显示,这些状态包括:未被访问状态,已被访问状态,鼠标悬停状态和激活状态。我们使用a : link { color: red }来设置未被访问的链接,如下图所示。
- 02
使用a:visited {color : pink;}设置已访问过的链接,当页面已经在浏览器打开并点击链接后,显示的便是访问过的效果,如下图所示。如果想要还原成未访问之前的状态,重新打开页面是不行的,需要清除浏览器的缓存才可。
- 03
使用a:hover {color : yellow;}设置鼠标悬停在链接上显示的效果,当鼠标显示为手型时,页面链接变为设置的效果,如下图所示。
- 04
使用a:active {color : green;}设置激活链接的效果,只有当鼠标点击的时候才起作用。设置a标签被激活时的样式(被点击时的样式),代码如下图所示。需要注意的是一定要按照顺序a:link,a:visited,a:hover,a:active来设置,否则不能达到预期的效果。
- 05
first-child 伪类,可以使用first-child伪类来选择元素的第一个子元素,如下图第一个元素分别为<p>元素的第一个元素和<li>元素的第一个元素。
- 06
:lang 伪类,可以为不同的语言定义特殊的规则。如下图所示,lang 类为属性值为 no 的q元素定义引号的类型:q:lang(no) { quotes: "(" ")" }。
- 07
:focus伪类,可以设置点击鼠标时的聚焦效果,如下图所示,当我们点击用户名文本框时出现黄色的背景色。