如何使用css来实现这个？

Question

我有一个这样的菜单结构：

* Alpina
      o Jongensfietsen
      o Meisjesfietsen
* Loekie
      o Jongensfietsen
      o Meisjesfietsen
* Batavus
      o Jongensfietsen
      o Meisjesfietsen
* Gazelle
      o Jongensfietsen
      o Meisjesfietsen

我想要的是给予：

Alpina a绿色#13721B

Loekie a黄色#edd938

Batavus a蓝色#93bffd

一只红色的羚羊#e22344

此外，我还想给出：

所有的"jongensfietsen“都是蓝色#2B70DC

所有"Meisjesfietsen“都是粉红色#D47AA9

如何使用css来实现这个？

  <div class="side-nav">
            <ul id="side-nav">
                        <li onmouseout="toggleMenu(this,0)" onmouseover="toggleMenu(this,1)" class="level0 nav-1 parent">
    <a href="http://www.mywebsite.nl/alpina.html">
    <span>Alpina</span>
    </a>
    <ul class="level0">
    <li class="level1 nav-1-1 first">
    <a href="http://www.mywebsite.nl/alpina/alpina-kinderfietsen-jongensfietsen.html">
    <span>Jongensfietsen</span>
    </a>
    </li><li class="level1 nav-1-2 last">
    <a href="http://www.mywebsite.nl/alpina/alpina-kinderfietsen-meisjesfietsen.html">
    <span>Meisjesfietsen</span>
    </a>
    </li>
    </ul>
    </li>                    <li onmouseout="toggleMenu(this,0)" onmouseover="toggleMenu(this,1)" class="level0 nav-2 parent">
    <a href="http://www.mywebsite.nl/loekie-1.html">
    <span>Loekie</span>
    </a>
    <ul class="level0">
    <li class="level1 nav-2-1 first">
    <a href="http://www.mywebsite.nl/loekie-1/jongensfietsen.html">
    <span>Jongensfietsen</span>
    </a>
    </li><li class="level1 nav-2-2 last">
    <a href="http://www.mywebsite.nl/loekie-1/meisjesfietsen.html">
    <span>Meisjesfietsen</span>
    </a>
    </li>
    </ul>
    </li>                    <li onmouseout="toggleMenu(this,0)" onmouseover="toggleMenu(this,1)" class="level0 nav-3 parent">
    <a href="http://www.mywebsite.nl/batavus.html">
    <span>Batavus</span>
    </a>
    <ul class="level0">
    <li class="level1 nav-3-1 first">
    <a href="http://www.mywebsite.nl/batavus/jongensfietsen.html">
    <span>Jongensfietsen</span>
    </a>
    </li><li class="level1 nav-3-2 last">
    <a href="http://www.mywebsite.nl/batavus/meisjesfietsen.html">
    <span>Meisjesfietsen</span>
    </a>
    </li>
    </ul>
    </li>                    <li onmouseout="toggleMenu(this,0)" onmouseover="toggleMenu(this,1)" class="level0 nav-4 parent">
    <a href="http://www.mywebsite.nl/gazelle.html">
    <span>Gazelle</span>
    </a>
    <ul class="level0">
    <li class="level1 nav-4-1 first">
    <a href="http://www.mywebsite.nl/gazelle/jongensfietsen.html">
    <span>Jongensfietsen</span>
    </a>
    </li><li class="level1 nav-4-2 last">
    <a href="http://www.mywebsite.nl/gazelle/meisjesfietsen.html">
    <span>Meisjesfietsen</span>
    </a>
    </li>
    </ul>
    </li>                </ul>
            </div>

Answer 1

CSS非常基础：

.nav-1 a { color:#13721b; }
.nav-2 a { color:#edd938; }
.nav-3 a { color:#93bffd; }
.nav-4 a { color:#e22344; }
.parent .first a { color:#2b70dc; }
.parent .last a { color:#d47aa9; }

演示： (有点冗长)

Answer 2

<style type="text/css">
.nav-1 { color: #13721B; }
.nav-2 { color: #edd938; }
.nav-3 { color: #93bffd; }
.nav-4 { color: #e22344; }
    .level0 .first { color:#2B70DC; }
    .level0 .last { color:#D47AA9; }
</style>

如果已对嵌套的<a>元素应用了样式，则可能还需要进一步指定这些元素。例如：

.level0 .first a { color:#2B70DC; }
.level0 .last a { color:#D47AA9; }

Answer 3

使用此<span style = "color:#93bffd">Loekie</span> ..你可以用类似的方式来设计其他的东西！