面试题：CSS 伪类选择器综合运用及性能优化

Question

在一个具有多层嵌套结构的复杂前端页面中，需要使用 :hover、:focus 和 :nth - child 伪类选择器来实现丰富的交互效果和样式定制。请描述如何合理运用这些选择器以避免性能问题，同时给出一个具体案例（包括 HTML 结构和 CSS 代码），说明如何在实现功能的同时优化性能。

Answer 1

避免性能问题的方法

1. 减少选择器的特异性：尽量避免使用过于复杂和特异性高的选择器组合。例如，避免使用大量嵌套的标签选择器与伪类选择器组合，如 body div ul li:nth-child(3):hover，而应尽量简化为 ul li:nth-child(3):hover。
2. 限制 :nth - child 的使用范围：:nth - child 伪类在计算匹配元素时可能开销较大，尤其是在元素数量较多的列表中。尽量在较小的、有限数量的元素集合上使用它，例如只在一组固定数量的导航菜单项目上使用。
3. 避免过度使用 :hover 和 :focus：如果在大量元素上同时使用 :hover 和 :focus 伪类，可能会导致浏览器频繁重绘和回流。只在关键的、用户交互频繁的元素上应用这些伪类。

具体案例

HTML 结构：

<ul class="menu">
    <li>菜单项1</li>
    <li>菜单项2</li>
    <li>菜单项3</li>
</ul>

CSS 代码：

.menu li {
    padding: 10px;
    background-color: lightgray;
    margin-bottom: 5px;
    list-style-type: none;
}

.menu li:nth-child(2) {
    background-color: gray;
}

.menu li:hover {
    background-color: darkgray;
}

.menu li:focus {
    outline: 2px solid blue;
}

在这个案例中，ul.menu 类的特异性不高，:nth - child(2) 只应用于 li 元素的有限集合，:hover 和 :focus 也只应用于 li 元素，避免了在大量元素上同时使用带来的性能问题，在实现交互效果和样式定制的同时优化了性能。