第n個孩子的顏色不對勁

我試圖讓每個L1使用nth-child(); 不同的顏色這是我的CSS：第n個孩子的顏色不對勁

header ul a:nth-child(1) { 
    color: #8cf; 
} 
header ul a:nth-child(2) { 
    color: #f8c; 
} 
header ul a:nth-child(3) { 
    color: #8fc; 
} 
header ul a:nth-child(4) { 
    color: #b9b; 
} 
header ul a:nth-child(5) { 
    color: #c8c; 
}

這是我的html：

<body> 
<div id="main"> 
<header> 
    <nav> 
    <ul> 
     <li><a href="index.html">Home</a></li> 
     <li><a href="blog.html">Blog</a></li> 
     <li><a href="forums.html">Forums</a></li> 
     <li id="iamhere"><a href="instruction.html">Instruction</a></li> 
     <li><a href="contact.html">Contact</a></li> 
    </ul> 
    </nav> 
</header>

儘管我沒有任何紫色的參考，但一切都是紫色的。

來源

2016-10-22 Ianardo

你的錨是隻有列表項的孩子，所以，第n個孩子正在做它的工作。每個主播沒有兄弟姐妹，這是第十一個孩子尋找的東西。 – j08691

您需要在li標籤上使用nth-child()標籤，您的a標籤沒有任何兄弟。紫色是已訪問鏈接的瀏覽器默認顏色。

header ul li:nth-child(1) a { 
 
    color: #8cf; 
 
} 
 
header ul li:nth-child(2) a { 
 
    color: #f8c; 
 
} 
 
header ul li:nth-child(3) a { 
 
    color: #8fc; 
 
} 
 
header ul li:nth-child(4) a { 
 
    color: #b9b; 
 
} 
 
header ul li:nth-child(5) a { 
 
    color: #c8c; 
 
}

<div id="main"> 
 
    <header> 
 
    <nav> 
 
     <ul> 
 
     <li><a href="index.html">Home</a> 
 
     </li> 
 
     <li><a href="blog.html">Blog</a> 
 
     </li> 
 
     <li><a href="forums.html">Forums</a> 
 
     </li> 
 
     <li id="iamhere"><a href="instruction.html">Instruction</a> 
 
     </li> 
 
     <li><a href="contact.html">Contact</a> 
 
     </li> 
 
     </ul> 
 
    </nav> 
 
    </header>

來源

2016-10-22 19:05:55 andreas

它爲什麼瞄準列表點？ – Ianardo

因爲我只是選擇'li'標籤。我已經更新了對「a」標籤的答案。這是你的意思嗎？ – andreas

的第n個孩子需要與父母和兄弟姐妹的HTML元素。在這種情況下，合格的元件是<LI>而且每一個具有正好一個<一個>元件。 CSS需要調整，以便選擇每個LI元素並將樣式應用於其單獨的A元素。

header ul li:nth-child(1) a { 
 
    color: #8cf; 
 
} 
 
header ul li:nth-child(2) a { 
 
    color: #f8c; 
 
} 
 
header ul li:nth-child(3) a { 
 
    color: #9ff; 
 
} 
 
header ul li:nth-child(4) a { 
 
    color: #000; 
 
} 
 
header ul li:nth-child(5) a { 
 
    color: #c8c; 
 
}

<header> 
 
    <nav> 
 
    <ul> 
 
     <li><a href="index.html">Home</a></li> 
 
     <li><a href="blog.html">Blog</a></li> 
 
     <li><a href="forums.html">Forums</a></li> 
 
     <li id="iamhere"><a href="instruction.html">Instruction</a></li> 
 
     <li><a href="contact.html">Contact</a></li> 
 
    </ul> 
 
    </nav> 
 
</header>

注：我改變有關最後兩個<一個>標籤只是爲了突出戲劇性結果的顏色。

而且，相對於瀏覽器改變了鏈接的顏色，在使用的CSS：第n個孩子被相應應用，然後在瀏覽器堅持即使鏈接是訪問的一個指定的顏色。

順便說一句，如果你想爲子彈顏色以適應各自的環節，CSS只需要稍作修改：

header ul li:nth-child(1), li:nth-child(1) a { 
    color: #8cf; 
} 
header ul li:nth-child(2), li:nth-child(2) a { 
    color: #f8c; 
} 
header ul li:nth-child(3), li:nth-child(3) a { 
    color: #9ff; 
} 
header ul li:nth-child(4), li:nth-child(4) a { 
    color: #000; 
} 
header ul li:nth-child(5), li:nth-child(5) a { 
    color: #c8c; 
}

查看即時代碼here。

如果HTML被重寫爲包含P元素等塊中的多個鏈接，那麼A元素將有資格獲得第n個子選擇，如示例here。

來源

2016-10-22 19:26:05 slevy1

添加標題爲「ul李：第n個孩子（1）」將不同顏色的錨標記。這裏

添加的代碼View Code

來源

2016-10-22 19:30:41

第n個孩子的顏色不對勁

回答

相關問題