Question

我找到了这个令人惊讶的资源http://gtmetrix.com/，您可以为网站提供网址，它会为您提供效果报告，并通过压缩和优化不同的内容为您提供估算。

它甚至为你做了大部分工作，它优化了我的所有图像，css和javascript文件，向我展示了当前页面上没有使用的css，它还显示了一个非高效的CSS选择器和节目列表选择器及其在css文件中的行号。

以下是我用于导航菜单的结果之一

ul#menu-navigation li>ul li a标记密钥，包含3个后代选择器和ID过度限定标记
ul#menu-navigation li>ul li a:hover标记密钥，包含3个后代选择器，ID过度限定为标记

所以我的问题是，是否有更好的方法来制作具有子菜单项的UL列表菜单？

Answer 1

首先，你不需要ID之前的ul，因为这个ID足够独特，但它对你的可读性等是有争议的。

当然你也可以删除>ul，但我认为你有意识地添加它是具体的，而在CSS中，它更“安全”（虽然“更好”可论证）比泛型更具体。

然后，假设您没有更改标记（使用额外的类等），我认为这是正确的方法。有冗余，我完全同意。这是CSS中的遗留问题。你无法用CSS本身来解决它。你和它一起生活，或者你找一些没有问题的东西为你生成CSS。

在我当前的项目中，我使用的是LESS CSS，这是一种非常类似于CSS的语法，并通过命令提示符（或称为，保存时生成的LessExtension的Visual Studio扩展名）生成实际的CSS文件。。在浏览器中还有用于生成的JS文件。

检查出来。我打赌你会喜欢它。您可以按原样获取CSS文件，然后开始添加好处。

LESS中的选择器将是：

#menu-navigation {
    li>ul li a {
        /* some Anchor styles */

        &:hover {
            /* some Anchor hover styles */
        }
    }
}

当然，您也可以拥有中间嵌套级别。为了简单起见，我在这里做了所有li>ul li a一个选择器而不是多个嵌套级别，但通常我会将它们中的每一个都设置为嵌套级别。

Answer 2

听起来他们只是希望你减少你正在使用的后代选择器的数量。因此，在较低级别的元素

上指定一个类

ul.submenu li a {  } 
li.submenu a {}
a.submenu {}

Answer 3

因为你的css是锚标签。您的选择器可以降低到