為什麼我的“nth-child”選擇器沒有按預期工作？

為什麼 nth-child 無法正常運作？

nth-child 選擇器是 CSS 中強大的工具，它可以讓你根據元素在父元素中的位置設定元素的樣式。但是，有時您可能會遇到第 n 個子選擇器似乎無法正常工作的問題。

最常見的原因之一是您可能嘗試使用第 n 個子選擇器來選擇不是兄弟元素的元素。 nth-child 選擇器計算兄弟元素，這意味著它只考慮具有相同父元素的元素。

例如，在以下HTML 程式碼中，div.social-logo 元素都是a 的子元素元素，因此第n 個子元素選擇器將無法如預期運作：

<code class="html"><div id="social-links">
  <a href=""><div class="social-logo"></div></a>
  <a href=""><div class="social-logo"></div></a>
  <a href=""><div class="social-logo"></div></a>
  <a href=""><div class="social-logo"></div></a>
</div></code>

要解決此問題，您需要使用第n 個子元素選擇器來選擇a 元素而不是div.social-logo 元素。例如，以下CSS 程式碼將設定#social-links div 中第一個a 元素的樣式：

<code class="css">#social-links a:nth-child(1) {
  background-color: red;
}</code>

nth-child 選擇器可能無法正常工作的另一個原因是您可能正在使用語法不正確。第 n 個子選擇器的正確語法是：

nth-child(n)

其中 n 是要選擇的元素的位置。例如，nth-child(1) 會選擇第一個元素，nth-child(2) 會選擇第二個元素，依此類推。

如果您使用的語法不正確，則 nth-child 選擇器將無法正常運作。例如，以下 CSS 程式碼將無法運作：

<code class="css">#social-links div:nth-child[1] {
  background-color: red;
}</code>

此程式碼不正確，因為第 n 個子選擇器不應與方括號一起使用。相反，您應該使用括號。

遵循這些提示，您可以確保第 n 個子級選擇器在 CSS 程式碼中正常運作。

以上是為什麼我的“nth-child”選擇器沒有按預期工作？的詳細內容。更多資訊請關注PHP中文網其他相關文章！