面试题：CSS高级难度面试题：伪类选择器的复杂应用

Question

在一个网页导航栏中，有一组无序列表（ul），列表项（li）代表不同的导航链接。要求实现：当鼠标悬停在当前页面对应的导航链接上时，不仅文字颜色变为红色，而且该列表项的下边框显示为2px宽的绿色实线。同时，当该导航链接被访问过后，文字颜色变为紫色。请用CSS伪类选择器实现该效果，并解释所使用的伪类选择器以及优先级如何处理。

Answer 1

CSS代码实现

ul li {
    list-style-type: none;
    display: inline-block;
    margin-right: 20px;
}

ul li a {
    text-decoration: none;
    color: black;
}

/* 鼠标悬停在当前页面对应导航链接时的样式 */
ul li.current a:hover {
    color: red;
    border-bottom: 2px solid green;
}

/* 导航链接被访问过后的样式 */
ul li a:visited {
    color: purple;
}

伪类选择器解释

1. :hover：这是一个动态伪类选择器，用于选择当用户鼠标悬停在元素上时的状态。在上述代码中，ul li.current a:hover 表示当鼠标悬停在当前页面对应的导航链接（通过 current 类标记当前页面）时，应用指定的样式，即文字颜色变红，下边框显示为2px宽的绿色实线。
2. :visited：这是一个目标伪类选择器，用于选择用户已经访问过的链接。在上述代码中，ul li a:visited 表示所有被访问过的导航链接文字颜色变为紫色。

优先级处理

在CSS中，优先级遵循以下规则：

1. 内联样式：直接写在HTML元素的 style 属性中的样式，优先级最高，权重为1000。
2. ID选择器：如 #id，权重为100。
3. 类选择器、属性选择器和伪类选择器：如 .class、[attr]、:hover 等，权重为10。
4. 元素选择器和伪元素选择器：如 div、::before，权重为1。

在上述代码中，ul li.current a:hover 和 ul li a:visited 都是由多个选择器组成。ul li.current a:hover 由元素选择器（ul、li）、类选择器（.current）和伪类选择器（:hover）组成，总权重为1 + 1 + 10 + 10 = 22；ul li a:visited 由元素选择器（ul、li）和伪类选择器（:visited）组成，总权重为1 + 1 + 10 = 12。由于 ul li.current a:hover 权重更高，所以当鼠标悬停在当前页面对应导航链接时，会优先应用 ul li.current a:hover 的样式，而不是 ul li a:visited 的样式。这样可以确保鼠标悬停效果不会被已访问链接的样式覆盖。