Question

以下是关于jsfiddle的示例：http://jsfiddle.net/v6kuL/

如何将Category1，Category2，Category3更改为其他颜色？

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>

在HTML标头中创建<style>标记，并在标记中添加类。

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

除了红色和黑色等颜色外，您还可以应用RGB格式的任何颜色，如下所示：color: #FFCC00;

Answer 2

您可以使用：

ul:not(.children) > li > a:first-child {
    color: red;
}

的 Updated Demo

Answer 3

我刚刚在CSS的开头添加了这个

li a{color:red;}
.children a{color:blue;}

这样父母是红色的，孩子是蓝色的。欢呼声。

如何设置树状菜单的选项？

3 个答案: