Question

注意：此问题在SO上没有类似的匹配。

我知道CSS选择器是从右到左阅读的。我也知道CSS类选择器不应该另外用标记名限定。

但其中哪些更快（不谈论特异性）：

.group   div { ...
.group .item { ...

这个HTML：

<div class="group">
    <div class="item"></div>
</div>

由于它是从右到左，并不意味着在第一种情况下，与第二种情况相比，浏览器将仅搜索div（因此更快），其中浏览器将搜索每个具有item类的元素（甚至在将父类与.group类进行比较之前）？

Answer 1

我希望.group .item更快（可以忽略不计）。

这是因为，很可能，div元素的数量将大于具有类item的元素的数量。

因此，如果您使用.group div，则每个div都会与div部分匹配，浏览器必须确保有.group个祖先。如果您使用.group .item，则每个.item都会与.item部分匹配，浏览器必须确保有.group祖先。

为了获得更好的性能，您希望避免误报，如果选择器不匹配元素，您希望尽快拒绝它。因此，如果.group .item少于.item，则div应该更快。

无论如何，如果可以，请使用子选择器而不是后代选择器。对于前者来说似乎更合理。