為什麼我的第 n 個子選擇器不能處理巢狀元素？

為什麼第 n-child 選擇器不起作用？

您可能在使用第 n-child 選擇器時遇到此問題造型目的。儘管使用此選擇器將背景圖像添加到不同的社交圖標，但您會注意到所有圖標都顯示相同的外觀。這表示您的程式碼中存在問題。

深入研究問題

第 n 個子選擇器旨在根據特定元素在其中的位置來定位特定元素兄弟元素。但是，在您的程式碼中，選擇器：

#social-links div:nth-child(1),
#social-links div:nth-child(2),
#social-links div:nth-child(3),
#social-links div:nth-child(4),

定位的是 #social-links 元素的子元素 div 元素。然而，這些 div 元素始終是其各自錨點 (a) 元素的唯一子元素。因此，第 n 個子選擇器無法區分它們，因為它們都是其錨元素的第一個且唯一的子元素。

正確方法

修正對於這個問題，您需要調整 nth-child 選擇器以定位錨元素而不是 div 元素。透過這樣做，您可以指定哪個錨元素應接收特定的背景圖像：

#social-links a:nth-child(1) div { 
   background-image: url('path/to/image1.svg'); 
}
#social-links a:nth-child(2) div { 
   background-image: url('path/to/image2.svg'); 
}
#social-links a:nth-child(3) div { 
   background-image: url('path/to/image3.svg'); 
}
#social-links a:nth-child(4) div { 
   background-image: url('path/to/image4.svg'); 
}

此修改後的程式碼結構可確保每個錨元素根據其在同級錨元素中的位置接收預期的背景圖像。

以上是為什麼我的第 n 個子選擇器不能處理巢狀元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！