html - 你能在一个 css 元素中使用多个子选择器吗？

Question

所以我正在尝试创建一个隐藏的下拉菜单，我只希望外部 li 具有特定的 css 元素。我想知道您是否可以使用多个子选择器 > ，这样我就可以应用到那些 li 中的链接，而不是应用到较小的菜单

例如:

<ul class="top">
  <li>
    <a href="#">random</a>
    <ul class="second">
       <li>
          <a href="#">random second</a>
       </li>
    </ul>
  </li>
  <li>
    <a href="#">random</a>
    <ul class="second">
       <li>
          <a href="#">random second</a>
       </li>
    </ul>
  </li>
  <li>
    <a href="#">random</a>
    <ul class="second">
       <li>
          <a href="#">random second</a>
       </li>
    </ul>
  </li>
  <li>
    <a href="#">random</a>
    <ul class="second">
       <li>
          <a href="#">random second</a>
       </li>
    </ul>
  </li>

css 元素将是:

ul.top > li > a {
   color: red;
}

而我希望 ul.second 中的 a 有一个随机示例 color: blue

Answer 1

如果你想定位“外部”链接，你应该按照你写的那样做:

ul.top > li > a {
   color: red;
}

如果您想定位“内部”链接，只需使用以下任一选择器:

ul.top ul a {
   color: green;
}

或

ul.second > li > a {
   color: green;
}