面试题：CSS高级难度面试题：伪类选择器的深度理解

:hover伪类选择器

使用场景：常用于当鼠标悬停在元素上时，改变元素的样式，比如按钮悬停时改变颜色、导航栏悬停时展开子菜单等。
注意事项：该伪类仅在鼠标操作设备上有效，对于触摸屏设备无效。而且应用时要确保样式变化不会影响页面的可读性和可用性。

:focus伪类选择器

使用场景：主要用于当元素获得焦点时设置样式，常见于表单输入框，当输入框获得焦点时改变边框颜色、背景色等，以提示用户当前输入位置。
注意事项：不同浏览器对于焦点样式的默认设置可能不同，要确保在各浏览器下样式表现一致。同时，也要避免设置过于复杂或影响输入的样式。

:nth - child(n)伪类选择器

使用场景：用于选择父元素下特定位置的子元素，比如在列表中隔行变色、选择表格的特定行等。
注意事项：n可以是数字、关键词（如even、odd）或公式（如2n+1）。要注意其计数是从1开始，并且选择是基于子元素在父元素中的位置，而不是CSS选择器匹配的顺序。

:not()伪类选择器

使用场景：用于选择不符合某种条件的元素，例如选择除了某个特定类名之外的所有元素，实现排除特定元素应用样式。
注意事项：括号内只能有一个简单选择器，不能包含多个选择器或复杂的选择器组合。

实现列表样式的代码示例

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        ul li:nth-child(odd) {
            background-color: lightgray;
        }

        ul li:nth-child(even) {
            background-color: white;
        }

        ul li:hover {
            color: red;
        }
    </style>
</head>

<body>
    <ul>
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
        <li>列表项4</li>
    </ul>
</body>

</html>

在上述代码中，:nth - child(odd) 和 :nth - child(even) 分别用于设置奇数项和偶数项的背景色，:hover 用于设置鼠标悬停时文字颜色变为红色。无需使用 :not() 伪类选择器即可实现该需求。

面试题：CSS高级难度面试题：伪类选择器的深度理解

知识考点

面试题答案

:hover伪类选择器

:focus伪类选择器

:nth - child(n)伪类选择器

:not()伪类选择器

实现列表样式的代码示例