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/