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

Question

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

我有以下内容：

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

我只需抓住第1项来改变它的CSS。我尝试过这样的事情： ul li a - 赢了，因为它会抓住第2项

1. ul li a - 赢了，因为它会抓住第2项
2. ul.navigation li - 赢得了工作因为它会抓住第2项
3. ul：第一个孩子 - 赢了，因为它会击中第1项和第A项

有什么想法吗？

Answer 1

你可以这样做：

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

或者像这样：

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;