CSS 下拉菜单：最快的选择器是什么？答案

【问题标题】：CSS dropdown menu: What is the fastest selector?CSS 下拉菜单：最快的选择器是什么？
【发布时间】：2013-09-22 06:55:15
【问题描述】：

我的页面上有一个由无序列表组成的多级导航菜单。该列表具有 menu 类，如下所示：

<ul class="menu">
    <li><a href="#">Category 1</a></li>
    <li><a href="#">Category 2</a></li>
    <li><a href="#">Category 3</a>
        <ul>
            <li><a href="#">Subcategory 1</a></li>
            <li><a href="#">Subcategory 2</a></li>
        </ul>
    </li>
</ul>

出于说明目的，href 属性设置为 #。

我的问题是：关于速度的那种菜单，最好的选择器是什么？

目前我正在使用这些方面的东西（再次，只是为了说明，缺少规则）：

.menu {
    background-color: #CCC;
}

.menu li {
    background-color: #FFF;
}

.menu li > ul li ul {
    background-color: #333;
}

在这种情况下，类是最快的选择器吗？或者我应该使用.navigation-container ul 之类的东西吗？你有什么建议吗？

【问题讨论】：

很确定您不会看到速度方面的任何重大变化
大多数选择器之间的速度差异非常小，可以忽略不计。你真的需要提高速度吗？最好专注于让事情正常运行，然后找到您的速度瓶颈并努力改进这些领域。

标签： html css performance drop-down-menu css-selectors

【解决方案1】：

更简单的选择器比复杂的选择器更快。例如，.menu 比 .menu ul 快，但没有显着差异。

你所拥有的一切都很好。您或许可以尝试使 .menu li > ul li ul 不那么复杂，但不要期望注意到任何差异，因为您可能会在渲染时间上减少一两毫秒。

这里是一些关于高效 CSS 选择器的阅读：http://csswizardry.com/2011/09/writing-efficient-css-selectors/

【讨论】：

【解决方案2】：

使用 id 引用会更快，例如#menu，#menu里。我也会在 sub ul 标签中添加一个 id :)

【讨论】：