首页理论教育HTML与CSS网页设计：伪类选择器

HTML与CSS网页设计：伪类选择器

2023-10-19 理论教育版权反馈

【摘要】：伪类用于向其他选择器指定适用范围内的特定元素或特定状态制定样式。用得比较多的场景是使用锚伪类为页面中的超链接制定在不同状态下不同的外观。例5.5：清除浏览器历史记录后运行此示例，结果如图5.5 所示。图5.6例5.5 的运行结果_锚伪类hover说明此时浏览者的鼠标位于样式规则声明链接的表面上方，这个链接处于hover 状态。它处于visited 状态，颜色变为灰色。这4 个锚伪类应按上述顺序依次编写。

伪类用于向其他选择器指定适用范围内的特定元素或特定状态制定样式。用得比较多的场景是使用锚伪类为页面中的超链接制定在不同状态下不同的外观。

例5.5：

pagenumber_ebook=122,pagenumber_book=111

清除浏览器历史记录后运行此示例，结果如图5.5 所示。

pagenumber_ebook=122,pagenumber_book=111

图5.5　例5.5 的运行结果_锚伪类link

说明

此时4 个链接指向的页面都未被访问，它们处于link 状态。字号为14 像素，文字无修饰线，颜色为蓝色。

将鼠标移动到某个链接表面上方，结果如图5.6 所示。

pagenumber_ebook=123,pagenumber_book=112

图5.6　例5.5 的运行结果_锚伪类hover

说明

此时浏览者的鼠标位于样式规则声明链接的表面上方，这个链接处于hover 状态。字号为16 像素，文字有下划线修饰，颜色为红色。其他3 个链接仍处于link 状态。

在某个链接表面上方按下鼠标，结果如图5.7 所示。

pagenumber_ebook=123,pagenumber_book=112 (www.chuimin.cn)

图5.7　例5.5 的运行结果_锚伪类active

说明

此时浏览者的鼠标按住了这个链接，这个链接被激活了，它处于active 状态。文字变为斜体。其他三个链接也处于link 状态。

单击某个链接，打开链接指向的页面，再回到5.5.html 页面，结果如图5.8 所示。

pagenumber_ebook=123,pagenumber_book=112

图5.8　例5.5 的运行结果_锚伪类visited

说明

样式规则声明这个链接指向的页面5.1.html 刚才被浏览者访问过。它处于visited 状态，颜色变为灰色。

注意

“a：link”“a：visited”“a：hover”“a：active”这4 个样式规则声明所使用的选择器是锚伪类。它们分别描述了页面上的所有链接在普通状态、已被访问状态、鼠标悬停状态、激活状态下4 种不同的样式。

这4 个锚伪类应按上述顺序依次编写。

说明

CSS 样式规则代码中，text-decoration 属性设置文字的装饰线；font-size 属性设置文字的字号大小；font-style 属性设置文字是否显示为斜体字。

CSS 伪类除了之前所述的四种锚伪类之外，还有：focus 伪类，：first-child 伪类，：lang（语言）等伪类，但因浏览器支持不够完善，应用较少，这里不做介绍。