css - 在 CSS 中选择子菜单项选择器的更好方法

Question

我找到了这个惊人的资源 http://gtmetrix.com/您提供网站的 URL，它会为您提供性能报告，并估算通过压缩和优化不同的东西可以节省多少。

它甚至为你完成了大部分工作，它优化了我所有的图像、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 非常相似的语法，并通过命令提示符生成实际的 CSS 文件(或者称为 LessExtension 的 Visual Studio 扩展，它在保存时生成) .在浏览器中也有生成的JS文件。

检查一下。我打赌你会喜欢的。您可以按原样使用 CSS 文件，并开始添加好处。

http://lesscss.org

LESS 中的选择器将是:

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

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

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