為什麼我的第 n 個子選擇器不能處理社交圖示？

第n 個子級選擇器不起作用：為什麼以及如何修復

第n 個子級選擇器是一個強大的工具，用於根據它們在父元素中的位置。然而，有時會令人困惑為什麼選擇器沒有按預期工作。

在提供的程式碼中，第 n 個子選擇器用於將不同的背景圖像應用於 #social- 中的社交圖示。連結分區儘管存在第 n 個子條件，但所有圖示都顯示相同。這個問題源自於對選擇器工作原理的誤解。

nth-child 的工作原理

nth-child 選擇器對同級元素進行計數，即共享同一父元素的元素。在提供的 HTML 中，每個 div.social-logo 都是其錨點 標記的唯一子級。因此，第 n 個子選擇器僅計算一個元素，無論其指定值為何。

但是，#social-links 中的錨標記彼此是同級的。因此，第n 個子選擇器可以使用以下語法有效地定位各個錨標記：

<code class="css">#social-links a:nth-child(1) div
#social-links a:nth-child(2) div
#social-links a:nth-child(3) div</code>

透過定位錨標記而不是div 子元素，第n 個子選擇器現在可以區分

解決方案

要解決此問題，請將原始的第n 個子級聲明替換為以下內容：

<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 個子選擇器將按預期正確地將不同的背景圖像應用於每個社交圖示。

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