jQuery：nth-​​child（）選擇器

Question

我在使用jQuery在Wordpress中將CSS樣式應用於下拉導航菜單時遇到問題。

基本上，我有5個導航鏈接。目的是讓每個下拉鍊接都有自己的顏色。例如，我所使用的代碼似乎有效，例如，每個鏈接都有一個下拉菜單。但是，如果僅在第二個鏈接和第四個鏈接上有下拉菜單，則第四個鏈接下拉顏色將使用第三個下拉顏色的顏色，即第n個子項（4）應該使用＃37595c，而是替代使用第n個孩子的顏色（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

使用>選擇器確保ULs是#nav_main的子項，LIs是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");