Question

当我读到更快的css选择器时，我注意到IDs和Classes比其他任何选择器都快。此外，浏览器会将您的CSS Selectors与正确匹配为左。也就是说，首先是最具体的选择器。

所以作者说不要在课程上附上任何后代; ID。

然而，当我阅读Facebook和Twitter的源代码时，我发现他们使用CSS这样：.uiInfoTable .label .annotation{color:#999}'，.big-photo-permalink .tweet .tweet-timestamp{// some css}

当这些选择器很慢时，他们为什么不简单地使用.annotation{color:#999}而不是这么长的选择器，或者如果这两个标签都可用，那么为什么不创建一个新类并添加这些CSS？

关于后代选择器我还有什么需要了解的吗？它们对CSS选择器的性能有影响吗？

Answer 1

在大多数情况下，性能影响几乎为零。但是，如果你开始构建更复杂的样式表，那么几乎为零＆＃34;可以加起来很大的东西。

就个人而言，我喜欢尽可能使用>组合子。例如，.menu>li优于.menu li，因为引擎只需要查找一个级别，而不是每次都一直到顶部。

>的另一个优点是它明确定义。想象一下：

<ul class="nav">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item with submenu
        <ul>
            <li>Item 3.1</li>
            <li>Item 3.2</li.
        </ul>
    </li>
</ul>

现在让我们假设您要将样式应用于<li>，但不是子菜单。 .nav>li可以很好地为此工作，而.nav li也会为子菜单设置样式。一个无知的程序员可能会尝试用.nav li li覆盖它，这会使性能问题变得更糟。

后代选择器很慢？

1 个答案: