如何使用純CSS實現元素顏色按n%3模式交替的效果？

純CSS實現元素顏色循環交替

本文介紹如何利用純CSS，基於元素索引，實現元素顏色按n%3模式循環交替的效果。這種技術在創建視覺上吸引人的列表或網格佈局時非常有用。

假設我們有以下HTML結構：

<div class="container">
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
</div>

以及CSS變量定義：

 .container {
  --color1: #fff;
  --color2: #da3838;
  --color3: rgb(49, 196, 23);
  p {
      /* 其他樣式*/
  }
}

我們的目標是讓每個<p>元素的背景顏色按照<code>n%3的餘數循環變化：

• 第1個元素： --color1
• 第2個元素： --color2
• 第3個元素： --color3
• 第4個元素： --color1
• 以此類推...

CSS的nth-child偽類可以實現這一目標。通過巧妙地運用nth-child的語法，我們可以選擇特定的元素並應用不同的樣式。

解決方案：

 .container p:nth-child(3n 1) {
  background-color: var(--color1);
}

.container p:nth-child(3n 2) {
  background-color: var(--color2);
}

.container p:nth-child(3n 3) {
  background-color: var(--color3);
}

這段CSS代碼利用了nth-child(3n x)選擇器：

• 3n 1選擇所有索引除以3餘數為1的元素(1, 4, 7, ...)
• 3n 2選擇所有索引除以3餘數為2的元素(2, 5, 8, ...)
• 3n 3選擇所有索引除以3餘數為0的元素(3, 6, 9, ...)

通過以上CSS代碼，我們成功地實現了<p>元素背景顏色的循環交替效果，滿足了<code>n%3的模式要求。 這種方法簡潔高效，完全使用純CSS實現，避免了JavaScript的額外開銷。

以上是如何使用純CSS實現元素顏色按n%3模式交替的效果？的詳細內容。更多資訊請關注PHP中文網其他相關文章！