你可以在一个 CSS 元素中使用多个子选择器吗？答案

【问题标题】：Can you use multiple child selectors in one css element?你可以在一个 CSS 元素中使用多个子选择器吗？
【发布时间】：2014-02-05 18:01:23
【问题描述】：

所以我正在尝试创建一个隐藏的下拉菜单，并且我只希望外部 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

【问题讨论】：

这样，您只定位下拉菜单之外的链接。这是你想要达到的目标吗？
jsfiddle.net/7Bt5h
@user2915402 我试图使外部链接与内部链接具有不同的 CSS 功能。由于我的实际代码有几个重要的外部导航 CSS 功能，我不想在内部导航中使用

标签： html css css-selectors parent-child

【解决方案1】：

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

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

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

ul.top ul a {
   color: green;
}

或

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

【讨论】：

是的，我最终自己想通了，但我一定会保留它以供将来参考。感谢您的帮助！