2

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

4

2 回答 2

4

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

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

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

于 2013-09-17T18:07:36.780 回答
1

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

于 2013-09-17T17:58:09.063 回答