css - ツリー メニューのオプションのスタイルを設定するにはどうすればよいですか?

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

以下を使用できます。

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

Updated Demo

Answer 2

これをCSSの最初に追加しました

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

このように、親は赤、子は青です。乾杯。