html - CSS下拉菜单: What is the fastest selector?

Question

我的页面上有一个由无序列表组成的多级导航菜单。该列表具有 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 这样的东西？您有什么建议吗？

Answer 1

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

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

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