面试题：CSS专家难度面试题：组合与伪类选择器的综合优化

Question

有一个电商产品展示页面，HTML结构较为复杂。每个产品都包含一个主div，类名为'product'，里面有产品图片（img）、产品标题（h3）、产品描述（p）等元素。产品分为热门产品（添加了类名'popular'）和普通产品。现在要求：1. 仅对热门产品，当鼠标悬停时，图片透明度变为0.8，标题文字加粗。2. 对所有产品，当在屏幕宽度小于768px时，产品描述隐藏。请使用最优化的CSS组合选择器与伪类选择器来实现这些效果，并阐述如何确保代码在不同浏览器中的兼容性，以及如何通过选择器的合理使用提升渲染性能。

Answer 1

CSS代码实现

/* 仅对热门产品，鼠标悬停时效果 */
.product.popular:hover img {
    opacity: 0.8;
}
.product.popular:hover h3 {
    font-weight: bold;
}

/* 屏幕宽度小于768px时，所有产品描述隐藏 */
@media (max-width: 768px) {
   .product p {
        display: none;
    }
}

浏览器兼容性确保

1. 前缀使用：对于一些CSS3属性，不同浏览器可能需要特定的前缀来支持。例如opacity属性在旧版本的浏览器中可能需要-webkit-opacity（Chrome、Safari）、-moz-opacity（Firefox）、-ms-filter（IE）等前缀。可以使用工具如Autoprefixer，它会根据目标浏览器的版本自动添加相应的前缀。
2. 特性检测：对于某些复杂的CSS功能，可以通过JavaScript进行特性检测。例如，检测浏览器是否支持opacity属性，如果不支持，可以使用filter属性在IE浏览器中模拟透明度效果。

通过选择器提升渲染性能

1. 避免使用通配符选择器：如*选择器，它会匹配页面上的所有元素，极大地增加计算量，影响渲染性能。
2. 减少选择器的层级深度：选择器层级过多会增加浏览器计算匹配元素的时间。尽量使用直接子选择器（>）或相邻兄弟选择器（+）等简单的组合选择器，避免后代选择器（空格）的过度嵌套。例如.product.popular:hover img就比.parent div.product.popular:hover img性能更好。
3. 避免使用复杂的伪类选择器：像:nth - child这类复杂的伪类选择器计算量较大，尽量少用。如果必须使用，可以通过JavaScript动态添加类名，然后使用简单的类选择器来控制样式，以提升渲染性能。