如何單獨定位嵌套圖像？

我試圖根據樣式隨機設置圖片的時間順序，只使用CSS，而不使用任何html類（old demo）。如何單獨定位嵌套圖像？

由於該部分中的所有圖像都是鏈接，因此我圍繞着img標籤打包了<a> ... </a>標籤，但現在CSS選項已損壞！

我曾嘗試過各種選擇，但所有被分解（施加未選中，不正確的背景顏色）：

sponsor img:nth-child(1) 
sponsor img:nth-of-type(1) 
sponsor a img:nth-child(1) 
a img:nth-child(1)

破碎時間選擇器JSFIDDLE Demo。我忽視了什麼？謝謝！

2017-07-17 Sam

您需要只需更換您的IMG：用：..和第n個孩子後加入IMG（） – Cam

'img'現在是你的主播的直接孩子，而不是「贊助者」，只有一個孩子，對每個主播都認爲它是「img：n-child（1）」。所以'img：nth-child（n）'如果'n！== 1'不會工作。你需要做的是改變你的選擇器，像@ Garric15在下面的答案中提出的。 – Ricky

通過將圖像包裝在<a> ... </a>標記中，img:nth-child(1)無效。你應該在a標籤，而不是使用:nth-child屬性：

sponsor a:nth-child(1) img{width:100%; background: Fuchsia} 
sponsor a:nth-child(2) img{width: 49%; background: YellowGreen} 
...

2017-07-17 17:36:26 Garric15

非常感謝這個演示非常清晰，並演示瞭如何以正確的方式使用它！這些「複雜的」css規則會不會減慢現代瀏覽器的速度？ – Sam

的nth-child()僞類的目標都是一樣的父母孩子。

由於img元素是sponsor，nth-child()的子女工作。

但是，當您將每個img包裝在一個定位元素中時，它們成爲a的子項，並且不再是sponsor的子項。因此，nth-child()失敗。

現在作爲a的第一個，最後一個和唯一的子女現在存在img，因此使用nth-child()作爲目標是毫無意義的。

要修復您的佈局，nth-child()需要針對sponsor –的新兒童錨。

取而代之的是：

sponsor img:nth-child(2)

試試這個：

sponsor > a:nth-child(2) > img

2017-07-17 17:54:06

感謝@Michael_B爲您的真棒解釋+1非常清楚 – Sam

@ Garric15，是否還有一種方法可以爲兒童[1]，[2-3]，[4-5]和[6-9]分組樣式？（1）{}'，'n-child（2-3）{}'，'n-child（4-5）'，'n-child（6-9））'（或者我應該問這是一個單獨的問題嗎？） – Sam

山姆，不客氣。很高興我可以幫助..關於你在上面的評論中的問題，這是有點牽扯，所以你可能想發佈一個新的問題。另外，請參閱我的答案以獲取指導。 https：//開頭計算器。com/a/45038349/3597276 –

回答