如何仅使用CSS选择无序列表的父级？

Question

在不改变HTML的情况下,我怎么只选择CSS的无序列表的父级？

我有以下内容:

<div class="content">
  <ul class="navigation">
    <li><a href="#">Item 1</a>
      <ul>
        <li><a href="#">Sub Item A</a></li>
        <li><a href="#">Sub Item B</a></li>
      </ul>
    </li>
    <li><a href="#">Item 2</a></li>
  </ul>
</div>

我只需要抓取第1项来改变它的CSS.我尝试过这样的事情:ul li a - 无法工作,因为它会抓住第2项

1. ul li a - 将无法工作,因为它将获取第2项
2. ul.navigation li - 将无法工作,因为它将获取第2项
3. ul:first-child - 无法工作,因为它会触及Item 1和Sub Item A.

有什么想法吗？

Answer 1

你可以这样做:

.navigation > li:first-child > a {color: red}

<div class="content">
  <ul class="navigation">
    <li><a href="#">Item 1</a>
      <ul>
        <li><a href="#">Sub Item A</a></li>
        <li><a href="#">Sub Item B</a></li>
      </ul>
    </li>
    <li><a href="#">Item 2</a></li>
  </ul>
</div>

或者像这样:

.navigation > li:first-of-type > a {color: red}

<div class="content">
  <ul class="navigation">
    <li><a href="#">Item 1</a>
      <ul>
        <li><a href="#">Sub Item A</a></li>
        <li><a href="#">Sub Item B</a></li>
      </ul>
    </li>
    <li><a href="#">Item 2</a></li>
  </ul>
</div>