為什麼我的社群圖示都使用「nth-child」選擇器？

了解第n 個子選擇器

嘗試使用第n 個子選擇器將唯一的背景圖像應用於不同的社交圖標時，您可能會遇到所有圖示都出現的問題相同。本文將深入探討此問題的根本原因並提供解決方案。

第 n 個子選擇器旨在根據元素在兄弟元素中的位置來選擇元素，這些元素共享相同的父元素。然而，在提供的 HTML 結構中，每個 div.social-logo 都是其對應 a 元素的唯一子元素。這意味著，無論 #social-links 容器中的 div 數量如何，nth-child 都只有一個元素可算作子元素。

要解決此問題，您可以改為定位包含以下內容的錨元素：使用 nth-child 的社交圖示。在這個 HTML 結構中，有多個錨元素，它們都是彼此的同級元素。因此，您可以使用第 n 個子選擇器來定位特定的錨元素並相應地應用唯一的背景圖像。

這是一個更正的CSS 程式碼範例：

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

#social-links a:nth-child(2) div {
  background-image: url(...);
}

#social-links a:nth-child(3) div {
  background-image: url(...);
}</code>

此修改後的方法可確保每個錨元素由第n 個子選擇器作為目標，允許您有效地將獨特的背景圖像應用於每個社交圖示。

以上是為什麼我的社群圖示都使用「nth-child」選擇器？的詳細內容。更多資訊請關注PHP中文網其他相關文章！