ループ内の結果を毎回異なる色にする方法について、フロントエンド マスターと TP マスターを見てみましょう。

以下の volist のループは、各ループの結果の背景色をどのように変更しますか?
効果は以下に示すとおりです
.acti{
width: 100%;
height: 70px;
//border: 1px 破線 # 7E54DC;
背景色: #E7E7E7;
マージン-ボトム: 5px;
フォントサイズ: 12px;
}

<ボリスト名="list" id="vo">

リーリー

返信内容:

以下の volist のループは、各ループの結果の背景色をどのように変更しますか?
効果は以下に示すとおりです
.acti{
width: 100%;
height: 70px;
//border: 1px 破線 # 7E54DC;
背景色: #E7E7E7;
マージン-ボトム: 5px;
フォントサイズ: 12px;
}

<ボリスト名="list" id="vo">

リーリー

1. ループ内のインデックスを通じてさまざまなクラスを追加します (c1、c2 など)。これらのクラスのスタイルをスタイルで定義します。
2. 奇数の項目には CSS セレクター selector:nth-child(n)，为某个子元素添加样式。n 可以具体的第 n 个，从 1 开始。也可以是表达式比如 :nth-child(2n) 偶数项、:nth-child(2n+1) を使用します。

対応する背景色のclass属性。然后根绝循环的索引值取不同的classプロパティを設定します

リーリー

ループ時にインデックス値を使用します

リーリー

お役に立てば幸いです、試してみてください

リーリー

ははは、完全にランダムなものを実装するには js を使用してください。

ウェブアプリを作っていますか