為什麼我的第 N 個子選擇器將樣式應用於所有元素而不是僅一個？

為什麼第 N 個子級選擇器不起作用？

第 n 個子級選擇器是一個強大的工具，用於定位一組同級中的特定元素。然而，了解其局限性以有效地使用它非常重要。

問題：所有社交圖示出現相同

考慮以下情況，其中nth-child用於向社交圖示添加背景圖像：

<code class="css">#social-links div:nth-child(1) { background-image: url('media/linkedin.svg'); }</code>

預期行為：只有第一個社群圖示應該有LinkedIn 背景圖片。
實際行為：所有圖示都具有相同的背景圖像。

原因：計算兄弟元素而不是元素

第 n 個子元素選擇器計算目標元素的兄弟元素數量，而不是元素本身。在上面的程式碼中，它計算了 #social-links 的 div 子元素的數量。

在這種情況下，div.social-logo 元素始終作為錨元素的唯一 div 子元素存在。因此，nth-child 始終傳回 1，這意味著每個元素都會收到相同的背景影像。

解決方案：定位父元素的兄弟姐妹

定位特定的div.social -logo 元素，我們需要修改選擇器以定位父錨元素的兄弟元素：

<code class="css">#social-links a:nth-child(1) div { background-image: url('media/linkedin.svg'); }</code>

透過定位錨元素的第n 個子元素，我們現在可以正確選擇預期的div.social-logo 元素並套用對應的背景圖像。

以上是為什麼我的第 N 個子選擇器將樣式應用於所有元素而不是僅一個？的詳細內容。更多資訊請關注PHP中文網其他相關文章！