CSS下拉菜单:最快的选择器是什么？

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/

Answer 2

使用id引用更快，例如#菜单、#菜单项。我也会在子ul标签中添加一个id :)