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 seletors的一些阅读：http://csswizardry.com/2011/09/writing-efficient-css-selectors/

Answer 2

使用id引用更快，例如#menu，＃menu li。我也会在子ul标签上添加一个id：）

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

2 个答案: