0

可能重复：
CSS 的通用选择器对性能有何影响？

我读过使用 * CSS 选择器并不理想，因为它需要更长的处理时间。然而，这真的是一个问题吗？如果我的 CSS 中有以下内容，显示页面需要多长时间？ 

#div1 *,
#div2 * {
float: none !important;
width: auto !important;
height: auto !important;
text-align: left;
position: static !important; 
}

在我看来，图像等大型资产的连接速度和数量将会产生更大的影响。我所做的工作是针对移动优化，但页面大小（由于各种库）约为 750KB，对此我无能为力。

作为旁注，我知道使用 !important 也不是理想的，但是我继承的凌乱代码意味着在这种情况下需要它。

4

1 回答 1

3

阅读这篇文章。

优化 CSS 选择器的关键是关注最右边的选择器，也称为键选择器（巧合？）。这是一个更昂贵的选择器：A.class0007 * {}。虽然这个选择器可能看起来更简单，但浏览器匹配的成本更高。

因为浏览器从右向左移动，它首先检查与键选择器“*”匹配的所有元素。这意味着浏览器必须尝试将此选择器与页面中的所有元素进行匹配。

于 2012-12-04T15:21:53.947 回答