css - 如何设置树形菜单选项的样式？

Question

这是一个关于 jsfiddle 的例子:http://jsfiddle.net/v6kuL/

如何将类别 1、类别 2、类别 3 更改为其他颜色？

HTML:

<ul>
   <li>
      <a href="/category/category1">Category 1</a>
      <ul class="children">
         <a href="/category/" >
            <li>
         <a href="/category/category1a">Category 1 A</a>
         </li>
         </a>
      </ul>
   </li>
   <li>
      <a href="/category/category2">Category 2</a>
   </li>
   <li>
      <a href="/category/category3">Category 3</a>
      <ul class="children">
         <a href="/category/" >
            <li>
         <a href="/category/category3a">Category 3 A</a>
         </li>
         <li>
            <a href="/category/category3b">Category 3 B</a>
         </li>
         </a>
      </ul>
   </li>
</ul>

我的尝试是在上面链接的 jsfiddle 上。

Answer 1

使用您要使用的颜色创建类，并将它们应用到 <a>标签。

<a href="/category/category1" class="red">Category 1</a>
<a href="/category/category1a" class="black">Category 1 A</a>

创建一个 <style>标记在您的 HTML header 中，并在标记内添加类。

.red{color:red;}
.black{color:black;}

除了红色和黑色等颜色，您还可以像这样应用任何 RGB 格式的颜色:color: #FFCC00;