jQuery：nth-​​child（）选择器

Question

我遇到了使用jQuery将CSS样式应用于Wordpress中的下拉导航菜单的问题。

基本上，我有5个导航链接。目的是让每个下拉链接都有自己的颜色。我使用的代码似乎可行，例如，每个链接都有一个下拉列表。但是，如果我只在第二个链接和第四个链接上有一个下拉列表，那么第四个链接下拉颜色使用的颜色来自第三个下拉颜色，即nth-child（4）应使用＃37595c而是使用nth-child（3）的颜色。任何有关解决此问题的帮助将不胜感激。代码如下：

$(document).ready(function(){
    $("#nav_main ul li:nth-child(1) ul.sub-menu a").css("background", "#9c1b36");
    $("#nav_main ul li:nth-child(2) ul.sub-menu a").css("background", "#808021");
    $("#nav_main ul li:nth-child(3) ul.sub-menu a").css("background", "#4a3349");
    $("#nav_main ul li:nth-child(4) ul.sub-menu a").css("background", "#37595c");
    $("#nav_main ul li:nth-child(5) ul.sub-menu a").css("background", "#41403e");  
});

在jsfiddle中复制了这个问题。如果您将鼠标悬停在“导航二”和“导航四”上，您将看到“导航四”正在使用“导航三”生效时使用的颜色：http://jsfiddle.net/cknz/vmRBp/3/

Answer 1

使用>选择器确保UL是#nav_main的子节点，LI是UL的子节点。并使用nth-of-type代替nth-child：

    $("#nav_main > ul > li:nth-of-type(1) a").css("background", "#9c1b36");
    $("#nav_main > ul > li:nth-of-type(2) a").css("background", "#808021");
    $("#nav_main > ul > li:nth-of-type(3) a").css("background", "#4a3349");
    $("#nav_main > ul > li:nth-of-type(4) a").css("background", "#37595c");
    $("#nav_main > ul > li:nth-of-type(5) a").css("background", "#41403e");