一个样式选择器指定悬停，在特定类中处于活动状态答案

【问题标题】：One style selector to specify both hover,active within a specific class一个样式选择器指定悬停，在特定类中处于活动状态
【发布时间】：2017-07-25 13:15:02
【问题描述】：

我正在尝试弄清楚如何为以下内容编写样式：

我只想为 .menu 中的锚标记设置 a:hover 和 a:active 样式，而不是 .menu-switch。以下似乎有效，但无论如何我可以将它们加入一种风格吗？

/*Apply the following styles to anchor tags within any ul within #main-nav*/
#main-nav ul li
a:link,
a:hover,
a:active,
a:visited {
    color: #fff;
    text-decoration: none;
    padding: 10px;
    display: block;
    border-radius: 4px;
}
/*Apply the following styles to anchor tags within .menu only within #main-nav*/
#main-nav .menu a:active {
    background-color: #ccc;
}

#main-nav .menu a:hover {
    background-color: #ccc;
}

<div id="main-nav">
    <ul class="menu-switch">
        <li><a class="js-menu-toggle" href="#">OPEN ME</a></li>
    </ul>
    <ul class="menu">
        <li><a href="#">Menu item 1</a></li>
        <li><a href="#">Menu item 2</a></li>
    </ul>
</div>

【问题讨论】：

标签： html css css-selectors

【解决方案1】：

您的代码实际上还有另一个问题：第一组 CSS 规则没有正确分组。您需要为列表中的每个选择器重复 #main-nav ul li 部分；否则，规则将适用于文档中的其他链接，而不仅仅是 #main-nav ul li 中的链接。

同样，要将最后两条规则分组，您需要将它们的选择器全部分组。

另外，如果您不知道，您可能想要follow the LoVe-HAte mnemonic in arranging your link pseudo-classes，除非您有充分的理由在:hover 和:active 之后对:visited 进行排序（我也花时间以相同的顺序排列最后两个选择器）。

/*Apply the following styles to anchor tags within any ul within #main-nav*/
#main-nav ul li a:link,
#main-nav ul li a:visited,
#main-nav ul li a:hover,
#main-nav ul li a:active {
    color: #fff;
    text-decoration: none;
    padding: 10px;
    display: block;
    border-radius: 4px;
}
/*Apply the following styles to anchor tags within .menu only within #main-nav*/
#main-nav .menu a:hover,
#main-nav .menu a:active {
    background-color: #ccc;
}

<div id="main-nav">
    <ul class="menu-switch">
        <li><a class="js-menu-toggle" href="#">OPEN ME</a></li>
    </ul>
    <ul class="menu">
        <li><a href="#">Menu item 1</a></li>
        <li><a href="#">Menu item 2</a></li>
    </ul>
</div>

【讨论】：

【解决方案2】：

#main-nav ul li a:link,
#main-nav ul li a:hover,
#main-nav ul li a:active,
#main-nav ul li a:visited {
  color: #000;
  text-decoration: none;
  padding: 10px;
  display: block;
  border-radius: 4px;
  border: 1px solid orange;
}
    /*Apply the following styles to anchor tags within .menu only within #main-nav*/
#main-nav ul a:active {
  background-color: #ccc;
  color: #fff;
}

#main-nav ul a:hover {
  background-color: #ccc;
  color: #fff;
}

<div id="main-nav">
  <ul class="menu-switch">
    <li><a class="js-menu-toggle" href="#">OPEN ME</a></li>
  </ul>
  <ul class="menu">
    <li><a href="#">Menu item 1</a></li>
    <li><a href="#">Menu item 2</a></li>
  </ul>
</div>

【讨论】：