html - 后代选择器很慢？

Question

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

所以作者说不要将任何后代附加到类； ID。

但是，当我阅读 Facebook 和 Twitter 的源代码时，我发现它们是这样使用 CSS 的:.uiInfoTable .label .annotation{color:#999}', .big-photo-permalink .tweet .tweet-timestamp{//一些 css}

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

关于后代选择器有什么我应该知道的吗？它们对 CSS 选择器的性能有影响吗？

Answer 1

在大多数情况下，性能损失几乎为零。但是，如果您开始构建更复杂的样式表，那么“几乎为零”的结果可能会非常大。

就个人而言，我喜欢使用 >尽可能使用组合器。 .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> s，但不是子菜单。 .nav>li为此效果很好，而 .nav li也会设置子菜单的样式。无知的程序员可能会尝试用 .nav li li 覆盖它。 ，使性能问题变得更糟。