javascript - less / css - 値が (n) の data 属性を持つ dom 要素をターゲットにする

Question

メニュー階層/分類内の深さに基づいてメニュー項目に色の配列を割り当てるナビゲーション メニューがあります。たとえば、最上位のメニュー項目はすべて黒、次のレベルは赤、次のレベルは緑などの色になり、階層が非常に深いため、数学を使用してそれらをターゲットにしたいと思います。その css は nth-child をターゲットにできます。ただし、これらのコンテナー要素 (「参照レベル」) は DOM に動的に追加および削除されるため (それらはすべて同時に DOM にあるわけではありません)、nth-child を使用できません。データ属性。

だからここにCSSがあります：

.browse-level[data-level="1"] li a {
  background: @level1;
}

.browse-level[data-level="2"] li a {
  background: @level2;
}

.browse-level[data-level="3"] li a {
  background: @level3;
}

.browse-level[data-level="4"] li a {
  background: @level4;
}

...など

8 つのカラー値があります (その後、シーケンスが繰り返されます)。(LESS またはプレーンな CSS を使用して) このコードを短くすることはできますか?